Tailwind CSS v4에서 Next.js 15에 적용한 커스터마이징 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• *Next.js 15 및 Tailwind CSS v4 사용자**
• 난이도: 중간 수준 개발자 (Tailwind CSS 기본 지식 필요)
• 도움 범위: Tailwind CSS 설정 파일(tailwind.config.js)을 사용하지 않고도 디자인 토큰 커스터마이징 방법을 배우고자 하는 개발자

핵심 요약

• @theme inline 지시문을 사용하여 globals.css 파일 내에서 디자인 토큰 직접 정의 가능
• 예: --color-primary: #66BB6A;
• Zero-config 접근 방식으로 복잡한 설정 파일 생략 가능
• Tailwind CSS v4 및 Next.js 15에서 자동으로 인식 및 컴파일
• IntelliSense 지원으로 편집기에서 실시간 코드 제안 가능

섹션별 세부 요약

1. Tailwind CSS v4와 Next.js 15의 변화

• Tailwind CSS v4는 zero-config 기반으로 설정 파일(tailwind.config.js)이 필요 없음
• Next.js 15에서 PostCSS와 globals.css를 통해 자동 설정
• 플러그인 사용 시만 tailwind.config.js 필요

2. `@theme inline` 사용법

• globals.css 파일에 @theme inline 지시문 추가
• 예:

```css

@theme inline {

--color-primary: #66BB6A;

--font-chillax: 'Chillax-Variable', sans-serif;

}

```

• 정의된 변수는 Tailwind의 유틸리티 클래스에서 직접 사용 가능
• 예: bg-primary, font-chillax

3. 지원되는 테마 변수 범주

• 색상: --color-* (예: bg-red-500)
• 폰트: --font-* (예: font-sans)
• 텍스트 크기: --text-* (예: text-xl)
• 반응형 브레이크포인트: --breakpoint- (예: sm:)
• 간격/크기: --spacing-* (예: px-4)
• 그림자: --shadow-* (예: shadow-md)

4. 주요 이점

• 설정 파일 생략으로 간결한 코드 구조 유지
• 편집기 IntelliSense 지원으로 개발 생산성 향상
• 기본 설정 자동화로 복잡한 프로젝트 구성 간소화

결론

• Next.js 15와 Tailwind CSS v4에서는 @theme inline을 활용해 tailwind.config.js 없이도 디자인 토큰을 직접 정의할 수 있음
• 간단한 프로젝트에서는 설정 파일 생략을 권장하며, 복잡한 기능이 필요한 경우 플러그인 사용 시 tailwind.config.js 생성
• globals.css에 @theme inline 정의 시, Tailwind 컴파일러가 자동으로 인식하여 빌드 시 적용됨