1312312323232Tailwind CSS v4 주요 업데이트

Tailwind CSS v4는 많은 새로운 기능과 개선사항을 제공합니다. 이 글에서는 가장 중요한 변화들을 살펴보겠습니다.

CSS 변수 기본 지원

Tailwind v4의 가장 큰 변화는 CSS 변수의 기본 지원입니다:

@theme {
  --color-primary: #3b82f6;
  --color-secondary: #8b5cf6;
  --font-sans: 'Inter', sans-serif;
}

이제 Tailwind가 자동으로 CSS 변수를 생성하고 관리합니다:

<div class="bg-primary text-white">
  프라이머리 컬러 배경
</div>

성능 개선

v4는 여러 측면에서 성능이 크게 향상되었습니다:

• 빌드 속도: 평균 40% 빠른 빌드
• 파일 크기: 최적화된 출력으로 더 작은 CSS 파일
• 메모리 사용량: 더 효율적인 메모리 관리

새로운 유틸리티 클래스

몇 가지 유용한 유틸리티가 추가되었습니다:

컨테이너 쿼리

<div class="@container">
  <div class="@lg:text-2xl">
    컨테이너가 크면 큰 텍스트
  </div>
</div>

동적 뷰포트 단위

<div class="h-dvh">
  동적 뷰포트 높이
</div>

개선된 그리드

<div class="grid grid-cols-subgrid">
  서브그리드 지원
</div>

다크 모드 개선

다크 모드 구현이 더 간단해졌습니다:

@theme {
  --color-background: light-dark(white, black);
  --color-text: light-dark(black, white);
}

<div class="bg-background text-text">
  자동으로 다크 모드 적용
</div>

타입스크립트 지원

Tailwind v4는 TypeScript와 더 잘 통합됩니다:

import type { Config } from 'tailwindcss'

const config: Config = {
  content: ['./app/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        brand: '#3b82f6',
      },
    },
  },
}

export default config

플러그인 시스템 개선

플러그인 API가 더 강력해지고 사용하기 쉬워졌습니다:

import plugin from 'tailwindcss/plugin'

export default {
  plugins: [
    plugin(({ addUtilities }) => {
      addUtilities({
        '.glass': {
          'backdrop-filter': 'blur(10px)',
          'background-color': 'rgba(255, 255, 255, 0.1)',
        },
      })
    }),
  ],
}

마이그레이션 가이드

v3에서 v4로 업그레이드하는 것은 비교적 간단합니다:

1. 의존성 업데이트:

npm install -D tailwindcss@4

1. 설정 파일 업데이트:

// tailwind.config.ts
export default {
  content: ['./app/**/*.{ts,tsx}'],
  // v4의 새로운 기능 활용
}

1. CSS 변수로 전환 (선택사항):

@theme {
  /* 커스텀 테마 정의 */
}

결론

Tailwind CSS v4는 CSS 변수 지원, 성능 개선, 그리고 새로운 유틸리티를 통해 더욱 강력해졌습니다. 기존 프로젝트를 업그레이드하거나 새 프로젝트를 시작할 때 v4의 새로운 기능들을 활용해보세요.