Tailwind CSS v4 - Rust 엔진 'Oxide'로 빌드가 최대 100배 빨라졌다

한 줄 요약 - Tailwind CSS가 v4에서 핵심 엔진을 Rust로 새로 짠 'Oxide'로 바꿔 빌드가 크게 빨라졌고, 설정도 JS 파일이 아니라 CSS에서 바로 합니다.

무슨 일이에요?

v3까지는 tailwind.config.js로 설정했는데, v4는 CSS에서 @import와 @theme로 토큰을 정의합니다. 엔진이 Rust라 스캔/생성이 빠릅니다.

핵심 코드

/* v4: CSS 한 곳에서 import + 토큰 정의 */
@import "tailwindcss";

@theme {
  --color-brand: #6d28d9;
  --font-display: "Pretendard", sans-serif;
}

<div class="bg-brand font-display">브랜드 색과 폰트가 토큰으로 연결됨</div>

왜 중요해요?

• 빌드 속도가 빨라지고 설정이 단순해집니다.
• 디자인 토큰을 CSS 변수로 일원화해 다른 CSS/라이브러리와도 잘 맞물립니다.