Tailwind CSS v4에서 @apply가 동작하지 않습니다

Tailwind CSS v4는 설정 방식이 완전히 바뀌었습니다.

v3까지는 tailwind.config.js + PostCSS 플러그인 방식이었지만, v4부터는 CSS-first 설정으로 전환되었습니다.

/* v4에서는 CSS 파일 최상단에 이렇게 선언 */
@import "tailwindcss";

/* @apply는 여전히 동작하지만, 위 import가 필요합니다 */
.btn {
  @apply px-4 py-2 bg-blue-500 text-white rounded;
}

1. tailwind.config.js 대신 CSS 파일에서 @import "tailwindcss" 사용
2. postcss.config.js에서 @tailwindcss/postcss 플러그인으로 교체

// postcss.config.js (v4)
module.exports = {
  plugins: {
    "@tailwindcss/postcss": {}
  }
}

기존 tailwindcss 플러그인이 아니라 @tailwindcss/postcss를 써야 합니다.

v4에서는 CSS 변수로 커스텀 테마를 설정합니다:

@import "tailwindcss";

@theme {
  --color-primary: #6ea8fe;
  --color-bg: #15171b;
  --font-display: "GMarketSans", sans-serif;
}

기존 tailwind.config.js의 theme.extend 내용을 @theme 블록으로 옮기면 됩니다. 공식 마이그레이션 가이드가 잘 되어 있으니 참고하세요.