지난 1월 tailwindcss가 v4버전을 릴리즈했습니다. tailwindcss는 Utility First를 지향하는 스타일링 프레임워크로 많은 관심을 받고있는데요. 이전 버전에 비해 어떤 변화가 생겼는지 알아보았습니다.

Tailwindcss 개발팀은 지난 몇년간의 경험을 기반으로 아키텍쳐를 개선하여 가능한 빠른 실행을 할 수 있도록 코드를 새롭게 작성했습니다. 자체 벤치마크 결과 전체 빌드는 3.5배, 증분 빌드는 8배 빠른 성능을 확인하였습니다. 성능 향상이 가장 두드러지게 보이는 케이스는 새로운 CSS를 빌드할 필요가 없는 증분 빌드의 경우로 100배 정도의 차이를 보였다고 합니다.

Tailwindcss의 v3 버전 이후 브라우저와 같은 CSS 플랫폼은 많은 진화가 있었고, v4를 통해서는 이러한 플랫폼에서 새롭게 제공하는 기능을 최대한 사용하여 레버리지 효과를 내려했습니다.

예를 들면, 다음과 같은 기능이 있습니다.

• Native Cascade Layers  — 다양한 출처의 스타일 규칙이 상호작용할 수 있도록 우선순위 관리를 용이하게 합니다.
• Registered custom properties  — CSS Custom Property를 사용하여 그라데이션 애니메이션과 같은 복잡한 효과를 가능하게 합니다. 또한, 대용량 페이지에서 성늘을 향상시킵니다.
• color-mix()  — CSS 변수, currentColor를 포함한 color 값에 opacity를 적용할 수 있습니다.
• Logical properties  — 문서를 읽는 방향에 대한 처리를 간단하게 처리하고 빌드된 CSS의 양을 줄입니다.

Tailwindcss v4는 이러한 최신 CSS 플랫폼 기능들을 활용하여 버그를 줄이고 유지관리가 용이한 형태로 변경되었습니다.

Tailwindcss v4는 설치 단계와 설정해야 하는 보일러플레이트가 줄어들었습니다.

yarn add -D tailwindcss @tailwindcss/postcss

module.export = {
  plugins: ['@tailwindcss/postcss']
}

@import 'tailwindcss';

• 이제, @tailwindcss 디렉티브 대신 @import “tailwindcss” 한줄로 tailwindcss를 불러옵니다.
• 프로젝트 구성을 위한 설정 파일은 필요하지 않게 되었습니다.
• 내부적으로 lightningcss  를 사용하여 vendor prefix를 추가하고 @import 문을 통해 하나의 번들을 구성합니다.

postCSS Plugin을 통해 설치되었던 이전 버전들과 달리 v4는 변경된 모듈 구성을 통해 그 자체로 CSS 후처리기로 동작합니다. tailwindcss 코어 모듈과 vite plugin 등록만으로도 사용이 가능해졌습니다.

yarn add -D tailwindcss @tailwindcss/vite

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
 
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
});

이전 버전에서는 설정파일(tailwindcss.config.js)에 Contents 대상을 배열로 구성하도록 작성해야했습니다. v4에서는 이러한 과정이 생략될 수 있도록 휴리스틱한 방법으로 대상 Contents를 찾습니다. 예를 들어, 프로젝트의 “.gitignore”에 포함되는 파일이나 이미지, 동영상 같은 바이너리 파일은 스캔 대상에서 제외됩니다.

제외된 파일을 등록하고 싶다면 명시적으로 @source 디렉티브를 통해 등록할 수 있습니다. 감지 방식에 대한 자세한 부분은 tailwindcss 문서 를 확인해주세요.

tailwindcss v4의 가장 주요한 변경점으로는 javascript에서 css로 변경된 설정에 있습니다. @theme 레이어 디렉티브에 css 변수로 기존의 설정을 옮겨놓으면 tailwindcss는 규칙에 따라 utility class를 생성합니다.

@import "tailwindcss";
 
@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 1920px;
  --color-avocado-100: oklch(0.99 0 0);
  --color-avocado-200: oklch(0.98 0.04 113.22);
  --color-avocado-300: oklch(0.94 0.11 115.03);
  --color-avocado-400: oklch(0.92 0.19 114.08);
  --color-avocado-500: oklch(0.84 0.18 117.33);
  --color-avocado-600: oklch(0.53 0.12 118.34);
  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
  /* ... */
}

또한, css 변수는 그대로 사용 가능하기 때문에, 인라인 스타일이나 Motion 같은 외부 라이브러리에서 쉽게 사용할 수 있습니다.

기본 컬러 팔레트를 rgb 색상에서 oklch로 변경하여 더 넓은 색상 영역에서 생생한 색상을 사용할 수 있도록 변경되었습니다.

이제 컨테이너 쿼리를 사용하기 위해 필요했던 @tailwindcss/container-queries 패키지를 플러그인으로 등록할 필요 없이 기본으로 제공합니다. @container 클래스로 컨테이너를 지정한뒤 크기를 지정하는 variants(@sm, @md, @lg 등)로 반응형 컨테이너를 구성할 수 있습니다.

<div class="@container">
  <div class="grid grid-cols-3 @max-md:grid-cols-1">
    <!-- ... -->
  </div>
</div>

rotate-x-*, rotate-y-*, scale-z-*, translate-z-*와 같은 3D Transform을 위한 utility class를 기본으로 지원합니다.

tailwindcss v4는 그라디언트에 대한 지원을 확장하였고, 커스텀 클래스를 등록해야할 필요가 줄어들었습니다.

그라디언트 각도 설정에 대한 utility class를 지원합니다.

• bg-linear-0, bg-linear-45, bg-linear-90

Gradient 색상 보간 모드 를 설정할 수 있는 수정자를 지원합니다.

Conic, Radial Gradient를 지원하기 위해 bg-conic-*, bg-radial-* 신규 클래스가 추가되었습니다. 새롭게 추가된 클래스 역시 색상 보간 수정자를 포함한 기능을 응용할 수 있습니다.

CSS @starting-style을 지원하기 위해 starting: variant가 추가되었습니다. 자바스크립트를 사용하지 않고, 첫 등장에 필요한 스타일을 구성할 수 있습니다. 다만, 최신 문법인 만큼 지원하는 브라우저와 버전을 확인해야합니다.

CSS :not() 을 지원하기 위한 not-* variant가 추가되었습니다. @supports 쿼리와 함께 사용될 수 있도록 개발되었습니다.

<div class="not-hover:opacity-75">
  <!-- ... -->
</div>
 
<div class="not-supports-hanging-punctuation:px-4">
  <!-- ... -->
</div>

이외에도 다양한 CSS 기능을 지원하는 utility class 및 variants가 추가되었습니다.

• inset-shadow-*, inset-ring-* utility class
• field-sizing utility class
• color-scheme utility class
• font-stretch utility class
• inert variant
• nth-* variants
• in variant
• open variant의 :popover-open 지원
• 자식 태그를 선택하기 위한 *:, **: variant 등.

오늘은 tailwindcss v4의 변경된 구성과 설정, 추가된 utility class, variants를 알아보았습니다. 개인적으로는 모던 브라우저의 변경점을 빠르게 쫒아가는 느낌을 받아서 앞으로도 어떤 변화를 가져올지 기대가 되었습니다. 더 자세한 내용은 공식문서를 확인해보시면 좋을 것 같습니다. 감사합니다.

Tailwind CSS v4.0We just released Tailwind CSS v4.0 — an all-new version of the framework optimized for performance and flexibility, with a reimagined configuration and customization experience, and taking full advantage of the latest advancements the web platform has to offer.https://tailwindcss.com/blog/tailwindcss-v4