software

Tailwind CSS v4: 내가 Styled Components보다 CSS-First Config를 선택한 이유

발행: (2025년 12월 6일 오후 03:49 GMT+9)
8 min read
원문: Dev.to

Source: Dev.to

Introduction

수년간 React 컴포넌트를 만들면서 CSS Modules, Styled Components, Emotion, Sass, 그리고 Tailwind v3 등 모든 스타일링 솔루션을 시도해봤습니다. Tailwind CSS v4 alpha가 혁신적인 Oxide 엔진과 CSS‑first 설정을 도입하면서, 뭔가 근본적인 변화가 일어났음을 직감했습니다.

  • 빌드 시간: 12 s → 1.2 s (10배 빠름)
  • 핫 모듈 교체(HMR): 500 ms → 빠르고, 타입‑안전하며, 유지보수 가능한 스타일링.

Evaluation Criteria

CriterionWeight
Build Performance30 %
Runtime Performance25 %
Developer Experience20 %
Maintainability15 %
Ecosystem10 %

각 도구는 기준당 1‑5 ★로 평가한 뒤 가중치를 적용합니다.

Tailwind CSS v4 (Oxide Engine)

What it is: @source와 @theme 지시자를 사용한 CSS‑first 설정을 제공하는 Rust 기반 CSS 프레임워크—tailwind.config.js가 필요 없습니다.

Innovation

  • Oxide Engine: v3 대비 10배 빠름 (Rust vs JavaScript)
  • CSS‑First: 설정이 @theme을 통해 CSS 안에서 이루어짐, JS가 아님
  • @source: 클래스가 있는 디렉터리를 직접 스캔
  • Native CSS: 변수, 컨테이너 쿼리 등 완전 지원

Stats

  • GitHub Stars: 82k+ ⭐
  • NPM Downloads: 10 M+/week 📦
  • Version: 4.0.0 (2024년 12월 기준 안정 버전)
  • Bundle Size: 8‑15 KB gzipped (tree‑shaken)

Key Features

@import 'tailwindcss';          /* single import, no config file */
@source './src';                /* scan directories for classes */
@theme {
  --color-primary: blue;
}
  • Oxide 덕분에 번개 같은 빌드 속도
  • PostCSS와 완전 호환

Best for: 새 프로젝트, 성능이 중요한 앱, CSS‑네이티브 설정을 원하는 디자인 시스템.

Tailwind CSS v3 (Traditional Approach)

What it is: JIT 엔진과 방대한 플러그인 생태계를 갖춘 JavaScript‑기반 유틸리티‑first CSS 프레임워크.

Stats

  • GitHub Stars: 82k+ ⭐
  • NPM Downloads: 10 M+/week 📦
  • Version: 3.4.15 (안정, 성숙)
  • Language: JavaScript + PostCSS

Pros & Cons

ProsCons
✅ 성숙하고 검증된 솔루션❌ Oxide 대비 느림 (≈10×)
✅ 방대한 플러그인 생태계❌ JS 설정 복잡도 (200+ 줄)
✅ 전 세계적인 지식 보유❌ HMR 속도 느림 (≈500 ms)
✅ JIT 엔진 여전히 빠름❌ 네이티브 @theme 부재
✅ 광범위한 커뮤니티
✅ 다양한 플러그인 지원

Best for: 기존 프로젝트, 안정성과 v3 전용 플러그인이 필요한 팀.

Styled Components (CSS‑in‑JS)

What it is: 태그드 템플릿 리터럴을 사용해 JavaScript 안에서 CSS를 작성하는 라이브러리.

import styled from 'styled-components';

const Button = styled.button`
  background: ${props => (props.primary ? 'blue' : 'gray')};
  padding: 1rem 2rem;
  border-radius: 0.5rem;
`;

Stats

  • GitHub Stars: 40k+ ⭐
  • NPM Downloads: 3.5 M/week 📦
  • Version: 6.1.13
  • Bundle Size: ~16 KB runtime + styles

Pros & Cons

ProsCons
✅ 진정한 컴포넌트 스코핑❌ 런타임 오버헤드 (스타일이 런타임에 계산)
✅ JS 로직을 활용한 동적 스타일링❌ 번들 크기 증가 (~16 KB + 스타일)
✅ TypeScript 지원❌ 성능 영향 (스타일 주입)
✅ 자동 벤더 프리픽싱❌ SSR 복잡도 (스타일 추출)
✅ Theme provider 제공❌ 빌드 시 최적화 부재
✅ 풍부한 커뮤니티

Best for: 동적 스타일링이 많이 필요하거나, 스코핑이 중요한 컴포넌트 라이브러리.

CSS Modules (Classic Approach)

What it is: 번들러가 생성하는 스코프된 클래스명을 활용하는 전통적인 CSS 방식.

/* Button.module.css */
.button {
  background: blue;
  padding: 1rem 2rem;
}
.primary {
  background: darkblue;
}
import styles from './Button.module.css';

Click

Stats

  • Bundle Size: 오직 CSS만 포함 (가능한 가장 작음)
  • Performance: 런타임 오버헤드 0, 순수 CSS

Pros & Cons

ProsCons
✅ 런타임 오버헤드 없음❌ 타입 안전성 부재 (클래스명 문자열)
✅ 가장 작은 번들 크기❌ 디자인 시스템 토큰을 수동으로 관리
✅ 자동 스코핑 (고유 클래스명)❌ 파일이 분리돼서 번거로움
✅ 표준 CSS 문법❌ 유틸리티 클래스 부재
✅ 모든 환경에서 동작 (Vite/Webpack 네이티브)❌ 디자인 일관성 유지 어려움
✅ 쉬운 학습 곡선

Best for: 작은 프로젝트, 전통적인 CSS에 익숙한 팀, 절대적인 최소 번들을 원하는 경우.

Other CSS‑in‑JS Option (Performance‑Focused)

What it is: Styled Components와 비슷하지만 더 가벼운 프레임워크 비종속 CSS‑in‑JS 라이브러리.

  • GitHub Stars: 17k+ ⭐
  • NPM Downloads: 2.5 M/week 📦
  • Version: 11.11.0
  • Bundle Size: ~7 KB runtime

Pros & Cons

ProsCons
✅ Styled Components보다 작음 (~7 KB)❌ 여전히 런타임 CSS‑in‑JS (주입 비용)
✅ Styled Components보다 성능 우수❌ 커뮤니티 규모 작음
✅ 프레임워크 비종속❌ SSR 복잡도
✅ 가벼운 번들

Best for: 성능에 민감한 CSS‑in‑JS 사용자, 다중 프레임워크 프로젝트.

Feature Comparison

FeatureTailwind v4Tailwind v3Styled ComponentsCSS ModulesOther CSS‑in‑JS
Build Speed⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
Runtime Perf⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
HMR Speed⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
Type Safety⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
DX (Ease of Use)⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
Bundle Size⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
Maintainability⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
Config Simplicity⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
Design System⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
Ecosystem⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
CommunityGrowingMassiveLargeUniversalMedium
Learning CurveLowestLowMediumLowMedium

Test Setup

  • Project: 포트폴리오 앱, 컴포넌트 50개 이상
  • Files: TypeScript/TSX 파일 180개
  • Styles: 색상 토큰 15개, 스페이싱 스케일 8개로 구성된 디자인 시스템
  • Machine: MacBook Pro M2, 16 GB RAM
  • Date: 2025년 12월

Benchmark Results

Build & HMR Performance

ToolInitial BuildRebuild (HMR)Production Build
Tailwind v41.2 s85 ms2.8 s
Tailwind v312.4 s520 ms8.1 s
Styled Components8.7 s380 ms12.3 s
CSS Modules2.1 s120 ms3.2 s
Emotion7.2 s320 ms10.5 s

Winner: Tailwind v4 (v3 대비 10배, Styled Components 대비 7배 빠름).

Bundle Size (gzipped)

ToolCSS OutputJS RuntimeTotal
Tailwind v412.3 KB0 KB12.3 KB
Tailwind v314.1 KB0 KB14.1 KB
Styled Components18.7 KB16 KB34.7 KB
CSS Modules8.2 KB0 KB8.2 KB
Emotion15.3 KB7 KB22.3 KB

Winner: CSS Modules (가장 작음), Tailwind v4 (유틸리티 프레임워크 중 최적).

Runtime Metrics

ToolFirst PaintTotal Blocking TimeStyle Recalc
Tailwind v40.8 s0 ms12 ms
Tailwind v30.8 s0 ms14 ms
Styled Components1.2 s35 ms28 ms
CSS Modules0.7 s0 ms10 ms
Emotion1.0 s22 ms18 ms

Winner: CSS Modules (순수 CSS), Tailwind v4 (유틸리티 프레임워크 중 최고 성능).

Conclusion

Tailwind CSS v4는 단순히 “더 빠른 Tailwind”가 아니라 2025년에 CSS 프레임워크가 어떻게 작동해야 하는지에 대한 근본적인 재고를 의미합니다:

  • Performance: 빌드와 HMR이 수십 배 빠름.
  • Configuration: 순수 CSS 방식으로 무거운 JavaScript 설정을 없앰.
  • Maintainability: @theme을 통한 간단하고 타입‑안전한 테마 관리.
  • Ecosystem: Rust 기반 툴링을 갖춘 성장 중인 커뮤니티.

성능이 중요한 신규 애플리케이션이나 CSS‑first 패러다임을 도입할 수 있는 프로젝트라면 Tailwind v4가 명확한 선택입니다. 기존 프로젝트는 여전히 Tailwind v3의 안정성을 활용할 수 있으며, 동적 스타일링이 필요하거나 절대적인 최소 번들을 목표로 하는 경우 CSS‑in‑JS와 CSS Modules도 여전히 유효한 옵션입니다.

Back to Blog

관련 글

더 보기 »