Tailwind CSS v4 미리보기: 엔진부터 바뀐 역대급 변화

들어가며

프런트엔드 스타일링의 표준이 된 Tailwind CSS가 메이저 업데이트인 v4의 베일을 벗었습니다. 이번 업데이트는 단순한 클래스 추가를 넘어, 내부 엔진을 Rust로 완전히 재작성하고 설정 방식을 표준 CSS 친화적으로 바꾸는 등 거대한 변화를 예고하고 있습니다.

현재 알파 버전까지 공개된 내용을 바탕으로 우리 개발 환경이 어떻게 달라질지 미리 살펴보겠습니다.

1. Rust 기반 엔진 ‘Oxide’의 등장

가장 큰 변화는 내부 코어 엔진이 자바스크립트에서 Rust로 작성된 새로운 엔진인 Oxide로 교체되었다는 점입니다.

• 비약적인 빌드 속도: 엔진 교체만으로 빌드 성능이 최대 10배 이상 향상되었습니다. 대규모 프로젝트에서도 즉각적인 HMR(Hot Module Replacement)을 경험할 수 있습니다.
• 가벼워진 설치 용량: 의존성이 대폭 줄어들어 패키지 크기가 훨씬 가벼워졌습니다.

2. CSS-First: 설정 파일이 사라지다

기존에는 tailwind.config.js라는 자바스크립트 파일을 통해 테마를 확장하고 설정했습니다. v4에서는 이를 표준 CSS 방식으로 완전히 대체합니다.

이제 @theme 블록 내에서 CSS 변수를 정의하는 것만으로 테마를 커스터마이징할 수 있습니다.

@import "tailwindcss";

@theme {
  --color-brand: #3b82f6;
  --font-display: "Inter", sans-serif;
  --spacing-13: 3.25rem;
}

위와 같이 정의하면 별도의 설정 없이도 text-brand, font-display, m-13과 같은 클래스를 즉시 사용할 수 있습니다.

3. 강력해진 결합형 유틸리티와 새로운 기능

v4는 모던 CSS 기능을 적극적으로 수용하며 클래스 작성 방식을 개선했습니다.

슬래시(/) 기반의 투명도 조절

별도의 클래스(ex: bg-opacity-50)를 사용할 필요 없이, 색상 뒤에 바로 슬래시를 붙여 투명도를 조절할 수 있습니다.

<div class="bg-blue-500/50 text-white/80">
  더 직관적인 문법을 지원합니다.
</div>

내장된 자동 접두사(Autoprefixer)

이제 별도의 autoprefixer 설치 없이도 Tailwind가 스스로 브라우저 호환성을 위한 접두사를 추가합니다. 빌드 툴체인이 극도로 단순해지는 것이죠.

4. 라이브러리 의존성 제로(Zero-dependency)

v4는 독립적인 툴체인으로 동작하는 것을 목표로 합니다. 이제 postcss 설정에 의존하지 않고도 Vite나 프레임워크 플러그인에서 단독으로 최고의 성능을 발휘합니다.

마치며

Tailwind CSS v4는 **“표준에 더 가깝게, 그리고 훨씬 더 빠르게”**라는 명확한 목표를 보여주고 있습니다. 자바스크립트 설정의 복잡함을 걷어내고 CSS 본연의 힘을 빌려 스타일링을 제어하는 방식은 앞으로의 웹 개발 표준이 될 것으로 보입니다.

아직 알파 버전인 만큼 실무 적용에는 주의가 필요하지만, 새로운 Oxide 엔진이 선사하는 쾌적한 개발 경험을 미리 테스트해 보시는 것을 추천합니다. 여러분은 이번 업데이트에서 어떤 변화가 가장 기대되시나요?