theinnovators수년간의 개발과 개선 끝에 Tailwind Labs가 마침내 Tailwind CSS v4.0을 공개했다. 이번 버전은 단순한 마이너 업데이트가 아닌, 2025년형 CSS 프레임워크의 본질을 재정의하는 전환점이라 할 수 있다.
성능의 혁신: 속도는 곧 생산성
v4.0에서 가장 눈에 띄는 변화는 성능 향상이다. 전체 빌드는 최대 5배 빨라졌고, 변경 사항이 없는 인크리멘털 빌드는 무려 100배 이상 빨라졌다. 마이크로초 단위로 처리되는 빌드는 사실상 즉각적인 응답에 가깝다.
예상 시간 비교:
- 전체 빌드: 378ms → 100ms (3.78배 향상)
- CSS 변경 포함 인크리멘털 빌드: 44ms → 5ms (8.8배 향상)
- 변경 없음 인크리멘털 빌드: 35ms → 192μs (182배 향상)
이러한 성능 향상은 Tailwind 엔진을 완전히 새롭게 설계하면서, 현대적인 개발 워크플로우에 최적화한 결과다.
CSS-First 구성 방식: 새로운 구성 패러다임
가장 큰 변화 중 하나는 설정 방식이다. 더 이상 tailwind.config.js 파일을 사용할 필요가 없다. 이제 구성은 CSS 파일 안에서 직접 이루어진다:
@import "tailwindcss";
@theme {
--font-display: "Satoshi", "sans-serif";
--breakpoint-3xl: 1920px;
--color-brand-100: oklch(0.99 0 0);
--color-brand-500: oklch(0.84 0.18 117.33);
--ease-fluid: cubic-bezier(0.3, 0, 0, 1);
}이런 방식의 장점은 다음과 같다:
- 관리해야 할 파일 수 감소
- IDE에서 CSS 변수 자동완성 및 유효성 검사 제공
- 런타임에서도 사용 가능한 커스텀 속성
- 설정과 사용 위치가 일치하여 직관적
최신 웹 기술을 중심으로 재설계
v4.0은 2025년의 웹 플랫폼이 제공하는 최신 CSS 기능들을 적극 반영하고 있다:
- Cascade Layers
@layer를 사용하여 스타일 우선순위를 명확하게 제어. 충돌과 오버라이드 이슈 감소. - 등록된 CSS 속성 (@property) CSS 변수의 성능 향상과 애니메이션 가능성을 확보. 특히 그라디언트 애니메이션이 자연스럽게 처리됨.
- color-mix() 함수 CSS 변수와
currentColor까지 포함하여 색상 조합 가능. 미리 정의된 모든 색상 조합 없이도 유연한 컬러 조절 가능. - 논리 속성 (Logical Properties)
margin-inline등으로 RTL(오른쪽에서 왼쪽으로 쓰는 언어) 지원을 단순화.
설치 및 구성: 그 어느 때보다 간결하게
Tailwind 설치는 이제 한 줄로 끝난다:
npm i tailwindcss @tailwindcss/postcssPostCSS 설정:
export default {
plugins: ["@tailwindcss/postcss"],
};CSS 파일:
@import "tailwindcss";별도의 Tailwind 디렉티브도, 복잡한 설정도 더 이상 필요 없다.
자동 콘텐츠 감지
Tailwind v3의 불편한 설정 항목 중 하나였던 content 배열 구성이 이제 사라졌다. v4.0은 다음과 같은 방식으로 소스 파일을 자동 감지한다:
.gitignore에 있는 파일 자동 무시- 바이너리 파일 (이미지, 동영상 등) 자동 스킵
- 별도 설정 없이도 전체 소스 파일 자동 스캔
- 예외 처리를 위한
@source지시문 제공
Vite 전용 플러그인 제공
Vite 사용자에게는 별도의 플러그인이 제공된다:
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
plugins: [tailwindcss()],
});동적 유틸리티: 설정 없이도 자유로운 사용
v4.0부터는 설정 파일에 값을 명시하지 않아도 다음과 같은 클래스 사용이 가능하다:
<div class="grid grid-cols-15">
<div data-current class="opacity-75 data-current:opacity-100">
<div class="mt-29 w-17 pr-143">이는 내부적으로 동적 스케일 변수를 사용해 다음과 같이 처리된다:
.mt-29 {
margin-top: calc(var(--spacing) * 29);
}색상 시스템 개선
기본 색상 팔레트가 RGB에서 OKLCH 색 공간으로 전환되어, 더 생생한 색상과 시각적 균형을 제공한다. 또한 P3 색역을 지원하는 최신 디스플레이에서도 최적화된 색상 표현이 가능해졌다.
- 현재 figma에서는 OKLCH를 지원하지 않습니다. https://oklch.com/ 사이트에서 hex값을 변환하여 사용하는 것을 권장합니다.
컨테이너 쿼리: 기본 내장
이제 Tailwind는 @container를 통해 뷰포트가 아닌 컨테이너 크기 기준 반응형 디자인을 구현할 수 있다:
<div class="@container">
<div class="grid grid-cols-1 @sm:grid-cols-3 @lg:grid-cols-4">
</div>
</div>3D 변형 및 고급 그라디언트
v4.0은 3D 변형 유틸리티도 지원한다:
<div class="perspective-distant">
<article class="rotate-x-51 rotate-y-12 scale-z-110 transform-3d">
</article>
</div>그라디언트 관련 유틸리티도 대폭 확장되었다:
<!-- 각도 있는 선형 그라디언트 -->
<div class="bg-linear-45 from-blue-500 to-purple-500">
<!-- 코닉 그라디언트 -->
<div class="bg-conic from-red-500 to-blue-500">
<!-- 사용자 지정 위치의 방사형 그라디언트 -->
<div class="bg-radial-[at_25%_25%] from-white to-black">새로운 Variant와 유틸리티 추가
v4.0에는 다음과 같은 새로운 유틸리티가 추가되었다:
not-*: CSS:not()가상 클래스 지원starting: 진입 애니메이션용@starting-style사용 가능inert: 비활성 요소에 대한 스타일링nth-*: 고급 자식 선택자descendant: 모든 자손 요소에 대한 스타일 적용field-sizing: 자동 크기 조절 textarea 지원color-scheme: 다크/라이트 모드 스크롤바 스타일 지원inset-shadow-*: 다중 그림자 지원
마이그레이션: 예상보다 수월
Tailwind Labs는 자동 마이그레이션 도구도 함께 제공한다. 이 도구는 다음을 자동으로 처리한다:
- 클래스명 변경
- JS 구성 → CSS 구성으로 변환
- 사용 중단된 유틸리티 제거
@import구문 업데이트
단, 최신 브라우저(Chrome 111+, Safari 16.4+, Firefox 128+)를 타겟팅해야 한다는 점은 유의해야 한다.
Tailwind CSS v4.0은 단순한 업데이트가 아닌 미래 CSS 개발 방식에 대한 방향 제시다. 최신 CSS 기능을 전면적으로 활용하며, 레거시 브라우저 지원을 과감히 탈피해 차세대 개발 환경에 최적화된 유틸리티 퍼스트 프레임워크로 진화했다.
CSS 중심 구성 방식은 다소 낯설 수 있지만 웹 플랫폼이 진화하는 방향과 정확히 맞닿아 있다. 강력한 성능, 간결한 설정, 확장된 기능은 누구에게나 매력적이다.
TI Tech Lab 이유진 연구원
Add comment