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

들어가며

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

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

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

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

기존에는 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과 같은 클래스를 즉시 사용할 수 있습니다.

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

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

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

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

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

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

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