Tailwind CSS 4 소개

Tailwind CSS 4는 더욱 강력한 반응형 디자인 도구를 제공합니다. 이 글에서는 실무에서 바로 사용할 수 있는 패턴들을 소개합니다.

새로운 기능

1. Native Cascade Layers

`@layer` 지시어가 네이티브 CSS로 변환됩니다.

@layer base {
  h1 {
    @apply text-4xl font-bold;
  }
}

2. Container Queries 지원

<div className="@container">
  <div className="@lg:grid @lg:grid-cols-2">
    <Card />
    <Card />
  </div>
</div>

반응형 패턴

모바일 퍼스트 접근

<div className="
  p-4
  md:p-6
  lg:p-8
  xl:p-10
">
  {/* 모바일부터 시작해서 점진적으로 확장 */}
</div>

그리드 레이아웃

<div className="
  grid
  grid-cols-1
  sm:grid-cols-2
  lg:grid-cols-3
  xl:grid-cols-4
  gap-4
">
  {items.map(item => <Card key={item.id} />)}
</div>

마무리

Tailwind CSS 4는 반응형 웹 개발을 더욱 쉽고 직관적으로 만들어줍니다. 컨테이너 쿼리 지원은 특히 게임 체인저입니다! 🎨