Tailwind 3, 4 비교

@theme이란?

@theme은 Tailwind CSS 4에서 새로 도입된 CSS 지시어(directive)

Tailwind 3 vs Tailwind 4 비교

Tailwind 3 (이전 방식):

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#3b82f6'
      }
    }
  }
}

Tailwind 4 (새로운 방식):

css/* CSS 파일에서 직접 */
@theme inline {
  --color-brand: #3b82f6;
}

왜 @theme 안에서 써야 하나?

1. Tailwind의 테마 시스템 통합

css@theme inline {
  --color-brand: #3b82f6;  /* 이것이 text-brand 클래스가 됨 */
}

--color-brand는 자동으로 text-brand, bg-brand, border-brand 등의 클래스를 생성

2. 일반 CSS 변수와의 차이점

/* 이렇게 하면 Tailwind 클래스가 생성되지 않음 */
:root {
  --my-color: #3b82f6;  /* text-my-color 클래스 생성 안됨 */
}

/* 이렇게 해야 Tailwind 클래스가 생성됨 */
@theme inline {
  --color-my-color: #3b82f6;  /* text-my-color 클래스 생성됨 */
}

3. Tailwind의 컴파일 과정

1. @theme 블록을 스캔
2. CSS 변수를 Tailwind 유틸리티 클래스로 변환
3. text-brand, bg-brand 등 생성

정리

• @theme은 Tailwind 4의 새로운 테마 정의 방법
• CSS 변수를 Tailwind 클래스로 자동 변환해주는 특별한 지시어
• @theme 밖에서 정의한 CSS 변수는 Tailwind 클래스가 되지 않음

그래서 커스텀 클래스를 사용하려면 반드시 @theme 안에서 정의해야 한다..