# [[Tailwind CSS v4 도입]]

## 📌 Brief Summary
Tailwind CSS v4는 기존의 JavaScript 기반 설정(`tailwind.config.js`) 방식에서 벗어나 CSS 우선(CSS-first) 아키텍처로의 근본적인 전환을 이룬 유틸리티 퍼스트 CSS 프레임워크입니다 [1, 2]. `@theme` 및 `@source` 지시어(directive)를 사용하여 네이티브 CSS 변수로 디자인 토큰을 직접 정의하고 관리하는 것이 특징입니다 [2-4]. 또한 Rust 언어 기반의 강력한 Oxide 엔진을 도입하여 기존 버전에 비해 최대 10배 이상 향상된 빌드 속도를 제공하며, 확장 가능하고 일관된 React 컴포넌트 및 UI 시스템을 구축하는 데 최적화되어 있습니다 [5-7].

## 📖 Core Content

*   **CSS 우선(CSS-first) 아키텍처 및 @theme 지시어:**
    기존 버전(v3)에서는 `tailwind.config.js`를 통해 모든 설정과 디자인 토큰을 정의했지만, v4에서는 CSS 파일 내에 `@theme` 지시어를 사용하여 네이티브 CSS 변수로 디자인 결정을 저장합니다 [1, 2, 7]. 예를 들어, `--color-primary-500`과 같은 변수를 선언하면 Tailwind가 이를 바탕으로 `bg-primary-500`, `text-primary-500`, `border-primary-500` 등 관련된 모든 유틸리티 클래스를 자동으로 생성합니다 [2, 4].
*   **@source 지시어로 간편해진 경로 설정:**
    이전의 JavaScript 내 `content` 경로 설정을 대체하기 위해 `@source` 지시어가 도입되었습니다 [3]. 이를 통해 CSS 파일에서 직접 어떤 파일을 스캔하여 유틸리티 클래스를 추출할지 선언할 수 있으며, 특히 대규모의 모노레포(Monorepo) 아키텍처 환경에서 보다 쉽게 파일 및 의존성을 관리할 수 있습니다 [3].
*   **Oxide 엔진을 통한 비약적인 성능 향상:**
    새로 도입된 Rust 기반의 Oxide 엔진 덕분에 런타임 및 빌드 성능이 극적으로 개선되었습니다 [5, 6]. 전체 빌드 속도는 이전 버전에 비해 약 5배에서 10배 빨라졌으며, 점진적 빌드(incremental builds) 속도는 100배 이상 향상되었습니다 [6, 8]. 또한 더욱 정교해진 트리 쉐이킹(Tree-shaking) 기능을 통해 불필요한 코드를 제거합니다 [6].
*   **확장성을 위한 디자인 토큰(Design Tokens) 체계화:**
    Tailwind CSS v4는 테마 구성 시 시각적으로 균일한 명도를 제공하는 OKLCH 색상 시스템을 채택하여 더욱 일관성 있는 색상 척도를 제공합니다 [9, 10]. 유연하게 확장되는 디자인 시스템을 구성하기 위해서는 토큰을 Base(원시 값), Semantic(목적 및 의도 기반), Component(컴포넌트 변형용)의 세 가지 계층(Layer)으로 분리하여 구조화하는 것이 강력하게 권장됩니다 [10, 11].
*   **재사용 가능한 컴포넌트 아키텍처와의 시너지:**
    React 기반의 대규모 애플리케이션에서는 CVA(Class Variance Authority) 라이브러리나 Compound Components(복합 컴포넌트) 패턴과 Tailwind v4를 결합하는 방식이 사용됩니다 [12, 13]. 이 패턴들을 활용하면 과도한 Prop Drilling(프롭스 전달)을 방지하고 상태 관리와 마크업을 분리하면서도 일관된 Tailwind 유틸리티 기반의 테마를 손쉽게 적용할 수 있습니다 [12, 14].

## 🔗 Knowledge Connections
- **Related Topics:** [[CSS-in-JS]], [[Design Tokens]], [[Class Variance Authority (CVA)]], [[React Server Components (RSC)]], [[Compound Components]]
- **Projects/Contexts:** [[Next.js App Router]], [[Component Library Architecture]], [[Scalable Frontend Architecture]]
- **Contradictions/Notes:** 기존 널리 사용되는 Styled Components 등의 런타임 CSS-in-JS 라이브러리들은 동적인 스타일링에 장점이 있지만 런타임 JavaScript 실행 비용(오버헤드)이 발생하여 React Server Components(RSC) 환경 및 Core Web Vitals 최적화에 취약하다는 문제를 갖습니다 [15-18]. 이와 반대로 Tailwind CSS v4는 정적 CSS 생성과 빌드 타임 최적화를 통해 오버헤드 없이 RSC와 완벽하게 호환되므로, 성능 중심의 최신 애플리케이션 아키텍처에 훨씬 더 적합한 접근법으로 평가받고 있습니다 [7, 17, 19].

---
*Last updated: 2026-04-26*