[Tailwind CSS] 반응형 유틸리티 클래스(미디어 쿼리@media)

Tailwind CSS의 반응형 유틸리티 클래스

• Tailwind CSS는 sm, md, lg, xl, 2xl 등의 반응형 프리픽스를 제공하며, 각각 특정 화면 크기 이상에서 적용된다.

 

 

sm:

: 화면 크기 640px 이상에서 적용

@media (min-width: 640px) { 
            ...
}

 

 

 

md:  

: 화면 크기 768px 이상에서 적용

@media (min-width: 768px) { 
            ...
}

 

 

 

lg:

: 화면 크기 1024px 이상에서 적용

@media (min-width: 1024px) { 
            ...
}

 

 

xl:

: 화면 크기 1280px 이상에서 적용

@media (min-width: 1280px) { 
            ...
}

 

 

2xl:

: 화면 크기 1536px 이상에서 적용

@media (min-width: 1536px) { 
            ...
}

 

 

• 예시
  
  • 기본 →  배경색 blue
  • sm 이상 →  배경색 green
  • md 이상 →  배경색 yellow
  • lg 이상 →  배경색 red
  • xl 이상 →  배경색 purple

<div class="bg-blue-500 sm:bg-green-500 md:bg-yellow-500 lg:bg-red-500 xl:bg-purple-500">
  반응형 배경색 예시
</div>

 

---

 

Responsive Design - Tailwind CSS