Tailwind CSS v4

이 문서에서는 Vapor UI와 Tailwind CSS v4를 함께 설정하는 방법을 설명합니다. 설정을 완료하면 Vapor UI 컴포넌트와 Tailwind 유틸리티 클래스를 함께 사용할 수 있습니다.

설정

메인 CSS 파일(예: global.css)에 아래 코드를 추가합니다.

/* global.css */

/* 1. 스타일 우선순위 정의 */
@layer tw-theme, vapor, tw-utilities;

@import '@vapor-ui/core/tailwind.css';

/* 2. Tailwind CSS 연결 */
@import 'tailwindcss/theme.css' layer(tw-theme);
@import 'tailwindcss/utilities.css' layer(tw-utilities);

설정이 완료되면 Vapor UI 컴포넌트와 Tailwind 유틸리티를 함께 사용할 수 있습니다.

Vapor 유틸리티 클래스

v- 접두사가 붙은 Vapor 전용 유틸리티 클래스를 사용할 수 있습니다.

디자인 토큰 클래스

Vapor의 색상, 간격, 둥근 모서리를 Tailwind 문법으로 사용합니다. v- 접두사를 추가하여 Vapor 디자인 토큰을 적용합니다.

• 색상: bg-v-blue-500, text-v-red-300, border-v-gray-900
• 간격: p-v-100, m-v-200, gap-v-400, w-v-400
• 둥근 모서리: rounded-v-200, rounded-t-v-400
• 폰트 굵기: font-v-400, font-v-700

Tailwind의 모든 유틸리티 클래스와 조합할 수 있습니다.

시맨틱 유틸리티 클래스

의미 기반 색상 클래스를 제공합니다. Primary, Success, Warning 등의 역할에 맞는 색상을 적용합니다.

• 배경색: bg-v-primary, bg-v-secondary, bg-v-success, bg-v-warning, bg-v-danger
• 텍스트색: text-v-primary, text-v-success, text-v-warning, text-v-danger, text-v-accent
• 테두리색: border-v-primary, border-v-success, border-v-warning, border-v-danger

스타일 우선순위

CSS @layer 규칙으로 스타일 우선순위 계층을 정의합니다.

1. Vapor 컴포넌트 기본 스타일
2. Vapor 유틸리티 클래스
3. Tailwind 유틸리티 (가장 높은 우선순위)

Tailwind 유틸리티가 가장 높은 우선순위를 가지므로 className="bg-blue-500"와 같은 클래스로 Vapor 컴포넌트를 커스터마이징할 수 있습니다.

CSS Reset 설정

Vapor UI는 필요한 스타일 초기화를 포함합니다. Tailwind의 preflight.css는 사용하지 않는 것을 권장합니다.

preflight.css가 필요한 경우 레이어 순서를 다음과 같이 조정합니다.

/* preflight를 사용해야 하는 경우 */
@layer tw-theme, vapor.theme, tw-base, vapor.reset, vapor.components, vapor.utilities, tw-utilities;

@import '@vapor-ui/core/tailwind.css';

@import 'tailwindcss/theme.css' layer(tw-theme);
@import 'tailwindcss/preflight.css' layer(tw-base);
@import 'tailwindcss/utilities.css' layer(tw-utilities);

이 설정은 스타일 충돌 가능성이 있으므로 필요한 경우에만 사용합니다.