Tailwind CSS 와 스타일링
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 파일을 따로 관리하지 않아도 되는 자유가 큽니다. 디자인 토큰을 함께 가져가면 일관성 문제도 풀립니다.
Next
- tauri-over-electron
- i18n-korean-first
Tailwind CSS 공식 · Tailwind GitHub · Tailwind 4 발표 · Adam Wathan — Utility Classes · shadcn/ui · Radix UI · vanilla-extract · Open Props 를 참고합니다.