포스트 목록으로

Tailwind CSS v4의 새로운 기능

Tailwind CSS 최신 버전의 혁신적인 기능들을 살펴봅니다.

2024년 11월 5일4분
Tailwind CSSCSSStyling

Tailwind CSS v4의 새로운 기능

Tailwind CSS v4가 출시되면서 CSS 작성이 한층 더 편리해졌습니다. 주요 변경사항과 새로운 기능들을 살펴보겠습니다.

주요 변경사항

1. Zero-Config Setup

설정 파일 없이도 바로 사용 가능:

npm install tailwindcss@4

/* app/globals.css */
@import "tailwindcss";

끝! 별도의 tailwind.config.js 파일이 필요 없습니다.

2. CSS-First Configuration

설정을 CSS에서 직접:

@import "tailwindcss";

@theme {
  --color-brand: #4f46e5;
  --font-display: 'Poppins', sans-serif;
  --breakpoint-tablet: 768px;
}

JavaScript 대신 CSS로 테마 설정!

3. Automatic Content Detection

더 이상 content 경로를 지정할 필요 없음:

// ❌ Before (v3)
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  // ...
}

// ✅ After (v4)
// 자동으로 감지!

새로운 기능

1. Container Queries

<div class="@container">
  <div class="@md:grid-cols-2 @lg:grid-cols-3">
    <!-- 부모 크기에 반응하는 그리드 -->
  </div>
</div>

뷰포트가 아닌 컨테이너 크기에 반응!

2. Dynamic Variants

<!-- 동적 색상 -->
<div class="bg-[--color-brand]">
  Brand Color
</div>

<!-- 동적 그리드 -->
<div class="grid-cols-[--grid-columns]">
  Dynamic Grid
</div>

CSS 변수와 Tailwind 클래스를 직접 결합!

3. Improved Dark Mode

@theme {
  --color-text: light-dark(#000, #fff);
  --color-bg: light-dark(#fff, #0f172a);
}

<!-- 자동으로 dark 모드 적용 -->
<div class="text-[--color-text] bg-[--color-bg]">
  Dark Mode Ready
</div>

4. Modern Color System

Oklab 색상 공간 지원:

@theme {
  --color-primary: oklab(0.5 0.2 0.1);
  --color-secondary: oklch(0.6 0.3 280);
}

더 정확하고 일관된 색상 표현!

5. Cascade Layers

@layer components {
  .btn {
    @apply px-4 py-2 rounded-lg;
  }
}

@layer utilities {
  .bg-pattern {
    background: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      rgba(0,0,0,.1) 10px,
      rgba(0,0,0,.1) 20px
    );
  }
}

CSS cascade를 더 잘 제어!

실전 예제

1. 다크모드 구현

/* app/globals.css */
@import "tailwindcss";

@theme {
  /* Light & Dark 색상 */
  --color-text: light-dark(#0f172a, #f1f5f9);
  --color-bg: light-dark(#ffffff, #0f172a);
  --color-primary: light-dark(#4f46e5, #818cf8);

  /* 그림자 */
  --shadow-sm: light-dark(
    0 1px 2px rgba(0,0,0,0.05),
    0 1px 2px rgba(255,255,255,0.05)
  );
}

// components/Card.tsx
export function Card({ children }) {
  return (
    <div className="
      bg-[--color-bg]
      text-[--color-text]
      shadow-[--shadow-sm]
      rounded-lg
      p-6
    ">
      {children}
    </div>
  );
}

2. 반응형 컨테이너

<div class="@container">
  <div class="
    grid
    @sm:grid-cols-2
    @md:grid-cols-3
    @lg:grid-cols-4
    gap-4
  ">
    <div class="@lg:col-span-2">Featured</div>
    <div>Item 1</div>
    <div>Item 2</div>
  </div>
</div>

3. 커스텀 테마

@theme {
  /* 브랜드 컬러 */
  --color-brand-50: #f0f9ff;
  --color-brand-100: #e0f2fe;
  --color-brand-500: #0ea5e9;
  --color-brand-900: #0c4a6e;

  /* 커스텀 폰트 */
  --font-sans: 'Pretendard', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* 커스텀 브레이크포인트 */
  --breakpoint-mobile: 480px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1440px;
}

성능 개선

Before (v3)

빌드 시간: 3.2s
CSS 크기: 250KB

After (v4)

빌드 시간: 0.8s ⚡ (75% 개선)
CSS 크기: 80KB 📦 (68% 감소)

마이그레이션 가이드

1. 설치

npm install tailwindcss@4

2. CSS 파일 업데이트

/* Before */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* After */
@import "tailwindcss";

3. Config 파일 변환 (선택사항)

// tailwind.config.js (v3)
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#4f46e5',
      },
    },
  },
}

↓

/* globals.css (v4) */
@theme {
  --color-brand: #4f46e5;
}

4. 플러그인 업데이트

대부분의 공식 플러그인이 v4와 호환됩니다:

npm install @tailwindcss/forms@4
npm install @tailwindcss/typography@4

유용한 팁

1. VSCode Extension

{
  "tailwindCSS.experimental.configFile": null,
  "tailwindCSS.includeLanguages": {
    "typescript": "javascript",
    "typescriptreact": "javascript"
  }
}

2. 자동 완성

Tailwind CSS IntelliSense 확장이 v4를 완벽 지원!

3. 조건부 스타일

function Button({ variant, size }) {
  return (
    <button className={`
      px-4 py-2 rounded-lg
      ${variant === 'primary'
        ? 'bg-[--color-brand] text-white'
        : 'bg-gray-200 text-gray-900'}
      ${size === 'lg' ? 'text-lg' : 'text-sm'}
    `}>
      Click me
    </button>
  );
}

새로운 유틸리티

1. Logical Properties

<!-- 시작/끝 기반 마진 (RTL 지원) -->
<div class="ms-4 me-8">
  Margin Start & End
</div>

<!-- 인라인/블록 패딩 -->
<div class="pi-4 pb-8">
  Padding Inline & Block
</div>

2. Subgrid

<div class="grid grid-cols-3 gap-4">
  <div class="col-span-3 grid grid-cols-subgrid">
    <!-- 부모 그리드를 상속 -->
    <div>Cell 1</div>
    <div>Cell 2</div>
    <div>Cell 3</div>
  </div>
</div>

3. Anchor Positioning

<div class="relative">
  <button id="trigger">Open</button>
  <div class="absolute anchor-[--trigger] anchor-top">
    Tooltip
  </div>
</div>

결론

Tailwind CSS v4의 장점:

  • ⚡ 더 빠른 빌드
  • 📦 더 작은 번들 크기
  • 🎨 더 유연한 테마 설정
  • 🔧 더 간단한 설정
  • 🎯 더 강력한 기능

지금 바로 업그레이드하세요!

npm install tailwindcss@latest

참고 자료