Tailwind CSS 와 스타일링 갈래

Tailwind CSS 는 utility-first 라 불리는 스타일링 접근의 대표 격입니다.

1. Tailwind 에 대한 이야기

Tailwind CSS 는 Adam Wathan 이 시작한 오픈소스 CSS 프레임워크입니다. 0.x 알파가 2017 년 11 월 공개됐고 1.0 은 2019 년 5 월에 나왔습니다. 라이선스는 MIT, 회사는 Tailwind Labs.

버전	시기	사건
1.0	2019-05	첫 정식.
2.0	2020	dark mode · 새 색상 팔레트.
3.0	2021	JIT (just-in-time) 엔진 기본화.
4.0	2025-01	Oxide 엔진 (Rust) 으로 재작성. CSS 기반 설정.

4.0 은 큰 변화입니다. 설정을 tailwind.config.js 의 JS 객체가 아니라 CSS 파일의 @theme 블록으로 옮겼고, 빌드는 Rust 로 다시 짠 Oxide 가 담당합니다.

2. utility-first

Tailwind 는 작은 단일-목적 클래스를 조합해 UI 를 만듭니다. CSS 파일을 새로 쓰지 않고 마크업에 클래스를 붙입니다.

<button class="px-4 py-2 rounded bg-blue-600 text-white hover:bg-blue-700">
  저장
</button>

이 접근의 정당화는 Adam Wathan 의 2017 년 글 "CSS Utility Classes and 'Separation of Concerns'" 에 정리돼 있습니다. 요지는 "HTML 과 CSS 를 분리한다는 명목이 사실은 서로 강하게 결합한 두 파일을 만든다" 는 관찰입니다.

3. JIT / Oxide 엔진

3.0 에서 도입된 JIT 는 사용된 클래스만 CSS 로 생성합니다. 결과 CSS 가 작아지고 임의값 (w-[37px]) 이 가능해집니다. 4.0 의 Oxide 는 JIT 를 Rust 로 재작성해 빌드 속도와 메모리를 개선했다고 발표됐습니다.

스캔 대상은 4.0 에서 @source 지시어로 명시합니다.

@import "tailwindcss";
@source "./src/**/*.{ts,tsx}";

@theme {
  --color-brand: oklch(0.7 0.14 250);
  --font-display: "Pretendard", sans-serif;
}

4. 디자인 토큰과의 관계

Tailwind 의 설정은 사실상 디자인 토큰의 컬렉션입니다 (색상·간격·폰트 크기·반경·그림자). 4.0 부터는 이 토큰이 CSS 변수로 직접 노출되어 다른 도구와 공유하기 쉬워졌습니다.

5. 다른 스타일링 갈래

전통 갈래:

접근	등장	특징
일반 CSS	1996	표준. cascade · specificity 의 무게.
Sass / SCSS	2006	변수·중첩·믹스인. 전처리기.
Less	2009	Sass 와 비슷. Bootstrap 3 까지 사용.
CSS Modules	2015~	파일 단위 스코프. 빌드 타임 클래스 해시.
BEM 명명 규약	2009~	스코프 문제를 규약으로 풀기.

CSS-in-JS:

라이브러리	출시	비고
styled-components	2016	tagged template literal. 런타임 스타일 주입.
Emotion	2017	styled-components 와 비슷하되 더 가벼움.
vanilla-extract	2021, Seek	빌드 타임 CSS-in-TS. 런타임 0.
Linaria	2018	빌드 타임 추출.

CSS-in-JS 는 RSC 와의 호환에서 어려움을 겪고 있다는 평이 흔합니다. 런타임 스타일 주입 모델은 서버 컴포넌트에서 자연스럽게 동작하지 않습니다.

6. shadcn/ui 와 Radix

도구	비고
Tailwind CSS	utility 의 표준.
UnoCSS	Vue 진영의 호환 엔진.
Bootstrap	컴포넌트 클래스 (`btn-primary` 등) 위주의 다른 모델.
shadcn/ui	컴포넌트의 소스 코드를 프로젝트에 복사해 들여오는 모델. Radix UI + Tailwind 조합.
Radix UI	헤드리스 접근성 컴포넌트 (WAI-ARIA). 스타일 없음.

shadcn/ui (2023, shadcn) 는 npm 라이브러리가 아니라 컴포넌트 카탈로그에 가깝습니다. CLI 가 컴포넌트 파일을 사용자 저장소에 복사하고 이후 사용자가 그 코드를 직접 소유합니다. Tailwind 의 utility 와 잘 맞는다는 점이 빠른 채택의 한 이유입니다.

7. Tailwind 4 설치

pnpm add -D tailwindcss @tailwindcss/postcss postcss

/* src/app/globals.css */
@import "tailwindcss";

@theme {
  --color-brand-50:  oklch(0.97 0.02 250);
  --color-brand-500: oklch(0.65 0.15 250);
  --color-brand-900: oklch(0.30 0.10 250);
  --radius-card: 0.75rem;
}

8. clsx + tailwind-merge

같은 카테고리 (예: p-2 와 p-4) 의 클래스가 충돌할 때 뒤의 것이 이기도록 정리해주는 도구.

import clsx from "clsx"
import { twMerge } from "tailwind-merge"

export const cn = (...args: any[]) => twMerge(clsx(args))

<button className={cn("px-2 py-1", primary && "px-4 py-2")} />

9. CVA — variants 패턴

import { cva } from "class-variance-authority"

const button = cva("rounded font-medium", {
  variants: {
    intent: { primary: "bg-blue-600 text-white", ghost: "bg-transparent" },
    size: { sm: "px-2 py-1 text-sm", md: "px-4 py-2" },
  },
  defaultVariants: { intent: "primary", size: "md" },
})

<button className={button({ intent: "ghost", size: "sm" })} />

10. 자주 걸리는 자리

@apply 의 남용 — 같은 utility 를 모아 새 클래스를 만들면 utility-first 의 이점이 줄어듭니다. 컴포넌트 파일 안에서 클래스 묶음을 변수로 두는 편이 자주 권장됩니다.

임의값 — w-[37px] 는 가능하지만 디자인 토큰을 우회합니다. 자주 쓰는 값은 토큰화하는 편이 일관성에 좋습니다.

다크 모드 — 기본은 class 모드 (<html class="dark">) 와 media 모드 중 선택. 4.0 부터는 @variant dark (...) 로 더 유연해졌습니다.

빌드 타임 스캔 누락 — @source 가 가리키지 않는 파일의 클래스는 빌드 결과 CSS 에 들어가지 않습니다. 동적으로 만든 클래스 문자열도 같은 함정.

명세 차이 — Tailwind 4 는 OKLCH 색공간 · container query (@container) 같은 최신 CSS 를 기본으로 씁니다. 매우 오래된 브라우저 지원이 필요한 환경에서는 검증이 필요합니다.

CSS 명세 학습의 회피 — utility 는 CSS 를 안 배워도 된다는 뜻이 아닙니다. Flexbox · Grid · cascade 를 모르면 utility 도 잘 못 조합합니다.

하고픈 말

utility-first 는 처음에 클래스 길이가 부담스럽습니다. 한번 익숙해지면 CSS 파일을 따로 관리하지 않아도 되는 자유가 큽니다. 디자인 토큰을 함께 가져가면 일관성 문제도 풀립니다.

tauri-over-electron
i18n-korean-first

Tailwind CSS 공식 · Tailwind GitHub · Tailwind 4 발표 · Adam Wathan — Utility Classes · shadcn/ui · Radix UI · vanilla-extract · Open Props 를 참고합니다.

Tailwind CSS 와 스타일링