Tailwind CSS 4.0과 모던 CSS 프레임워크 동향

개요

Tailwind CSS 4.0은 완전히 새로운 엔진으로 재작성되어 빌드 성능과 개발자 경험이 대폭 개선되었습니다. CSS-first 설정, Rust 기반 Lightning CSS 엔진 채택, 네이티브 CSS 기능 활용 등 혁신적인 변화를 담고 있습니다. 이와 함께 모던 CSS 생태계의 전체적인 트렌드도 함께 살펴봅니다.

핵심 개념

1. CSS-first Configuration: tailwind.config.js 파일 대신 CSS 파일에서 직접 설정합니다. @theme 지시어를 사용하여 디자인 토큰을 정의하며, 이는 CSS 커스텀 프로퍼티로 변환됩니다.

2. Lightning CSS 엔진: 기존 PostCSS + Autoprefixer 조합을 대체하여 빌드 속도가 최대 10배 향상되었습니다. 벤더 프리픽스, 구문 변환, 미니파이가 통합 처리됩니다.

3. 네이티브 CSS 기능 활용: cascade layers(@layer), 네이티브 nesting, color-mix(), light-dark() 등 최신 CSS 기능을 적극 활용합니다. 이를 통해 런타임 오버헤드가 제거되었습니다.

4. 자동 콘텐츠 감지: content 설정이 불필요합니다. Tailwind 4.0은 프로젝트 파일을 자동으로 감지하여 사용된 클래스만 포함합니다.

실전 예제

Tailwind CSS 4.0의 CSS-first 설정 방식입니다.

/* app.css - Tailwind 4.0 CSS-first 설정 */
@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --color-secondary: #10b981;
  --font-display: "Pretendard", sans-serif;
  --breakpoint-3xl: 1920px;
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* 커스텀 유틸리티 */
@utility text-gradient {
  background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 다크 모드 - light-dark() 네이티브 CSS 활용 */
@theme {
  --color-surface: light-dark(#ffffff, #1a1a2e);
  --color-text: light-dark(#1a1a2e, #e0e0e0);
}

새로운 유틸리티와 변형 클래스 활용 예시입니다.

// React 컴포넌트에서 Tailwind 4.0 활용
function Card({ title, description, image }) {
  return (
    <div className="
      group relative overflow-hidden rounded-2xl
      bg-[--color-surface] shadow-lg
      transition-all duration-300 ease-bounce
      hover:shadow-2xl hover:-translate-y-1
      @container
    ">
      <img
        src={image}
        alt={title}
        className="aspect-video w-full object-cover
          transition-transform duration-500
          group-hover:scale-105"
      />
      <div className="p-6">
        <h3 className="text-gradient text-xl font-display font-bold">
          {title}
        </h3>
        <p className="mt-2 text-[--color-text] @md:text-lg">
          {description}
        </p>
      </div>
    </div>
  );
}

활용 팁

• 마이그레이션 도구: npx @tailwindcss/upgrade 명령으로 기존 프로젝트를 자동 마이그레이션할 수 있습니다.
• Container Queries: Tailwind 4.0의 @container 지원으로 반응형 컴포넌트를 뷰포트가 아닌 부모 컨테이너 기준으로 설계할 수 있습니다.
• 3D 변환: translate-z, rotate-x, perspective 등 3D 변환 유틸리티가 기본 제공됩니다.
• CSS 레이어: @layer를 활용한 스타일 우선순위 제어가 가능하여 서드파티 CSS와의 충돌을 최소화합니다.
• Vite 플러그인: Tailwind 4.0은 @tailwindcss/vite 플러그인으로 Vite 프로젝트에 원활하게 통합됩니다. PostCSS 설정이 불필요합니다.
• 프로덕션 빌드에서 CSS 크기가 기존 대비 20-30% 감소하는 것을 체감할 수 있습니다.

마무리

Tailwind CSS 4.0은 유틸리티 퍼스트 CSS 프레임워크의 새로운 기준을 제시합니다. CSS-first 설정은 웹 표준과의 정렬을 강화하고, Lightning CSS 엔진은 빌드 성능을 획기적으로 개선합니다. 네이티브 CSS 기능의 적극적인 활용은 브라우저 호환성이 성숙해진 현재 시점에서 올바른 방향이며, 더 가볍고 빠른 웹 경험을 구현할 수 있게 해줍니다.