1장: Tailwind CSS v4 소개 — 패러다임의 전환

Tailwind CSS는 유틸리티 우선(Utility-First) CSS 프레임워크로, 프론트엔드 개발의 스타일링 방식을 근본적으로 바꿔놓았습니다. 2024년 말에 출시된 v4는 단순한 버전 업데이트가 아닌 패러다임의 전환입니다. JavaScript 기반 설정에서 CSS-first 설정으로, PostCSS 플러그인에서 독립 빌드 엔진으로, 설정 파일 중심에서 CSS 내장 기능 중심으로 — Tailwind의 근본적인 동작 방식이 바뀌었습니다.

v4가 가져온 변화

아키텍처의 완전한 재작성

Tailwind CSS v4는 내부 엔진을 처음부터 다시 작성했습니다. 가장 큰 변화는 다음 세 가지입니다.

Rust 기반 고성능 엔진(Oxide): v3까지 JavaScript로 작성되었던 CSS 처리 엔진이 Rust로 재작성되었습니다. 이를 통해 빌드 속도가 극적으로 개선되었으며, 대규모 프로젝트에서도 밀리초 단위의 빌드를 달성합니다.

독립 실행형 도구: v3에서는 PostCSS 플러그인으로만 사용할 수 있었지만, v4는 자체 빌드 도구(@tailwindcss/cli), PostCSS 플러그인(@tailwindcss/postcss), Vite 플러그인(@tailwindcss/vite) 등 다양한 통합 방식을 제공합니다.

CSS-first 설정: tailwind.config.js 파일이 더 이상 필요하지 않습니다. 모든 설정을 CSS 파일 안에서 @theme 디렉티브로 정의합니다.

핵심 변경사항 요약

새로운 임포트 구조

v3에서 세 줄의 @tailwind 디렉티브를 사용했다면, v4에서는 단 한 줄로 시작합니다.

@tailwind base;
@tailwind components;
@tailwind utilities;

@import "tailwindcss";

이 한 줄이 기본 리셋 스타일, 테마 변수, 유틸리티 클래스를 모두 포함합니다. 필요에 따라 각 레이어를 개별적으로 임포트할 수도 있습니다.

@import "tailwindcss/preflight";
@import "tailwindcss/theme";
@import "tailwindcss/utilities";

CSS-first 설정

v4의 가장 큰 철학적 변화는 설정의 장소가 JavaScript에서 CSS로 이동한 것입니다. @theme 디렉티브를 통해 디자인 토큰을 CSS 안에서 직접 정의합니다.

@import "tailwindcss";
 
@theme {
  --color-primary: oklch(0.6 0.2 250);
  --color-secondary: oklch(0.7 0.15 180);
 
  --font-sans: "Pretendard", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
 
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
 
  --spacing-18: 4.5rem;
  --spacing-22: 5.5rem;
 
  --animate-fade-in: fade-in 0.3s ease-out;
}
 
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@theme에서 정의한 변수는 자동으로 유틸리티 클래스를 생성합니다. --color-primary를 정의하면 bg-primary, text-primary, border-primary 등의 클래스가 자동으로 사용 가능해집니다.

자동 콘텐츠 감지

v3에서는 tailwind.config.js의 content 배열에 파일 경로를 수동으로 지정해야 했습니다.

module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  // ...
}

v4는 프로젝트 구조를 자동으로 분석하여 Tailwind 클래스가 사용된 파일을 감지합니다. .gitignore를 존중하며, node_modules나 바이너리 파일은 자동으로 제외합니다. 추가적인 소스 경로가 필요한 경우 @source 디렉티브로 지정할 수 있습니다.

@import "tailwindcss";
@source "../node_modules/@my-ui/components";

OKLCH 색상 시스템

v4는 기본 색상 시스템을 OKLCH로 전환했습니다. OKLCH는 인간의 색 인지에 기반한 색 공간으로, RGB나 HSL보다 더 균일하고 예측 가능한 색상 조작을 가능하게 합니다.

@theme {
  --color-blue-500: oklch(0.623 0.214 259.815);
  --color-green-500: oklch(0.723 0.219 149.579);
  --color-red-500: oklch(0.637 0.237 25.331);
}

OKLCH의 세 구성 요소는 다음과 같습니다.

• L (Lightness): 밝기 (0~1)
• C (Chroma): 채도 (0~0.37+)
• H (Hue): 색상 (0~360)

빌드 통합 방식

v4는 프로젝트 환경에 맞는 다양한 통합 방식을 제공합니다.

Vite 플러그인 (권장)

import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "vite";
 
export default defineConfig({
  plugins: [tailwindcss()],
});

PostCSS 플러그인

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

CLI

npx @tailwindcss/cli -i input.css -o output.css --watch

성능 향상

Rust 기반 엔진으로의 전환은 체감할 수 있는 성능 개선을 가져왔습니다.

• 초기 빌드: v3 대비 최대 5배 빠름
• 증분 빌드: v3 대비 최대 100배 빠름 (마이크로초 단위)
• CSS 출력 크기: 더 효율적인 유틸리티 생성으로 출력 크기 감소

이 성능 향상은 특히 개발 서버에서의 HMR(Hot Module Replacement) 속도에 직접적인 영향을 줍니다. 클래스를 변경하고 저장하면 거의 즉시 결과가 반영됩니다.

이 시리즈에서 다루는 내용

이 시리즈는 Tailwind CSS v4의 핵심 기능을 깊이 있게 다루며, 각 기능의 원리, 설계 의도, 실전 활용 패턴을 체계적으로 학습합니다.

• 2장: CSS-first 설정과 @theme 디렉티브 심층 분석
• 3장: 새로운 임포트 구조와 CSS 레이어 시스템
• 4장: OKLCH 색상 시스템과 색상 유틸리티
• 5장: 컨테이너 쿼리와 반응형 디자인의 진화
• 6장: 새로운 유틸리티 클래스와 변형(Variants)
• 7장: 고급 애니메이션과 트랜지션
• 8장: 다크 모드와 테마 전략
• 9장: 커스텀 변형과 플러그인 시스템
• 10장: 디자인 시스템 구축 실전
• 11장: v3에서 v4로 마이그레이션

준비 사항

# 새 프로젝트 (Vite + React 기준)
npm create vite@latest my-app -- --template react-ts
cd my-app
 
# Tailwind CSS v4 설치
npm install tailwindcss @tailwindcss/vite
 
# vite.config.ts에 플러그인 추가 후
# src/index.css에 아래 한 줄 추가
# @import "tailwindcss";

정리

Tailwind CSS v4는 유틸리티 우선 CSS의 개념은 유지하면서, 그 기반 기술을 완전히 현대화했습니다. Rust 엔진으로 성능을 혁신하고, CSS-first 설정으로 도구 의존성을 줄이며, OKLCH 색상으로 더 풍부한 시각 표현을 가능하게 합니다. 다음 장부터 각 기능을 하나씩 깊이 파고들어 보겠습니다. 먼저 2장에서는 v4의 핵심인 @theme 디렉티브와 CSS-first 설정 방식을 상세히 살펴봅니다.