Next.js X Tailwind CSS v4에서는 글로벌 CSS 설정이 얼마나 쉬워졌을까?

Tailwind CSS v4는 기존 버전과 비교해 글로벌 테마 설정과 컬러 시스템 적용이 매우 간결해졌습니다. 이 글에서는 디자이너와 협업하여 색상 시스템을 구축하고, 이를 Tailwind v4에서 얼마나 간단하게 반영할 수 있는지 소개합니다.

개발환경은 next.js에서 진행합니다,

핵심 포인트: @theme 블록만 신경 쓰면 된다

v4에서는 테마 컬러를  global.css한 곳에서 정의합니다. 

v3에서는 tailwind.config.js를 다 깔아줘야했기에 정말 불편했습니다.

그러나 v4부터는 global.css 내부에 디자이너님이 정해주신 색깔들을 주입만 하고, 실제 컴포넌트의 색깔에 그대로 적용만  시키면 끝입니다.

@theme {
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-900: #101828;
  --color-black: #131313;
  --color-white: #ffffff;
  --color-error: #fb2c36;
  --color-mint: oklch(0.72 0.11 178);
  --color-banana: oklch(0.95 0.05 100);
}

이렇게 정의된 컬러는 Tailwind 유틸리티 클래스에서 바로 사용됩니다:

<div className="bg-gray-100 text-gray-800 border border-gray-300">
  텍스트 예시
</div>

<button className="bg-error text-white px-4 py-2 rounded">
  삭제하기
</button>

다크모드? .dark { ... } 블록만 유지하면 끝

기존에는 tailwind.config.js에서 extend 등을 설정해줘야 했지만, 이제는 CSS에서 아래처럼 정의만 하면 됩니다:

.dark {
  --color-background: oklch(0.145 0 0);
  --color-foreground: oklch(0.985 0 0);
}

config 없이도 자동 인식되는 content 범위

Tailwind v4는 .gitignore 기준으로 node_modules, .next, dist 등은 자동으로 제외하고 content를 스캔합니다. 즉, tailwind.config.js 없이도 걱정 없이 시작할 수 있습니다.

 

결론

Tailwind CSS v4는 정말로 "디자이너와 개발자가 바로 소통할 수 있는 시스템"으로 발전했습니다. 색상 변수만 @theme에 정의하면 자동으로 클래스화되고, 나머지 전역 설정은 거의 건들 필요가 없습니다.

CSS 변수 기반 시스템으로 진입장벽은 낮추고, 확장성과 협업 경험은 더 향상됐습니다.

이제는 복잡한 config 없이도, 바로 시작하세요. @theme만 있으면 충분합니다.