새로운 변화! Tailwind CSS v4.0 알아보기

v1 개정 2025.05.01

2025.05.01

· Updated 2025.05.01

Tailwind CSS가 2025년 1월 경 v4.0으로 업데이트 됐습니다! Tailwind CSS는 클래스명을 사용해 스타일을 빠르게 적용할 수 있는 유틸리티 접근 방식으로 많은 개발자들에게 사랑을 받는 라이브러리입니다. 하지만 v4.0은 이전 버전이었던 v3.4에 비해 많은 변화가 있어서 혼란스러운데요. 어떤 변화가 있었는지 한번 꼼꼼히 알아보겠습니다.

Tailwind CSS 개발자 Adam Wathan이 작성한 블로그 글을 참고했습니다.

변경사항

1. 새로운 고성능 엔진

이제 Tailwind CSS는 독립적인 Oxide 엔진으로 구동됩니다. 원래 Tailwind CSS는 PostCSS, AutoPrefixer, PostCSS Import 와 같은 라이브러리에 종속되어 있었습니다. 하지만, v4.0에서는 Tailwind Labs에서 개발한 Oxide 엔진을 통해 용량은 더 작게, 빌드 속도는 더 빠르게, 그리고 PostCSS에 대한 종속성을 제거했습니다.

Oxide 엔진은 PostCSS가 필요했던 작업(최종 CSS 생성 등)을 Lightning CSS로 대체합니다. Lightning CSS는 Parcel 팀에서 개발한 Rust 기반 CSS 변환 도구로, JavaScript 기반인 PostCSS의 모든 기능을 대체하며 더 빠릅니다.

또, Oxide 엔진은 비용이 많이 드는 작업과 병렬 처리가 필요한 작업을 Rust 언어로 대체했습니다. 따라서 성능과 용량에서 큰 강점을 보입니다. 원본 글에 따르면 벤치마크 결과, v3.4와 비교해 전체 빌드는 3.5배 이상 빠르고, 증분 빌드 시에는 8배 이상 빠른 것으로 나타났다고 합니다. 표로 보면 다음과 같습니다.

-	v3.4	v4.0	향상
전체 빌드 시간	378ms	100ms	3.78배
새로운 CSS와 함께 증분 빌드 시간	44ms	5ms	8.8배
새로운 CSS 없이 증분 빌드 시간	35ms	192µs	182

Oxide 엔진의 컨셉에 대해서 더 알아보려면 Tailwind Labs가 진행한 Tailwind Connect 2023의 Oxide, the next evolution of Tailwind CSS 섹션을 살펴보세요.

2. 모던 웹에 맞게 디자인

v4는 단순히 빠르기만 한 것이 아니라 모던 CSS의 최신 기능들을 적극적으로 도입해 CSS 자체를 더 강력하고 효율적으로 사용할 수 있도록 설계되었습니다.

2.1. Cascade Layers (@layer)

Cascade Layers는 모던 CSS에서 지원하는 새로운 기능으로, CSS의 우선 순위를 개발자가 명시적으로 제어할 수 있도록 만든 표준입니다. 이를 사용하면 CSS의 충돌 문제를 해결하고, 스타일 간 의도된 우선순위를 부여할 수 있습니다.

v4에서는 이 기능을 적극 도입해 개발자가 직접 작성한 CSS에 @layer components 등을 쓰면 우선순위가 자연스럽게 Tailwind보다 앞서거나 뒤서게 조절할 수 있습니다.

@layer theme, base, components, utilities;
@layer utilities {
  .mx-6 {
    margin-inline: calc(var(--spacing) * 6);
  }
}

예를 들어 다음과 같이 적용했다면 theme < base < components < utilities 순으로 우선순위가 적용되겠죠.

2.2. 사용자 정의 속성 (@property)

@property를 적극적으로 사용해 애니메이션의 성능 향상이나 의도된 값만 허용하도록 합니다. 복잡한 색상 애니메이션이나 그라디언트 등에 사용할 경우 성능 향상을 얻을 수 있습니다.

@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

2.3. color-mix() 함수

색상과 투명도를 CSS에서 직접 계산할 수 있습니다. 이전에는 Sass와 같은 전처리 도구나 JavaScript를 사용해야 했습니다.

.bg-blue-500\/50 {
  background-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
}

2.4. 논리적 속성

기존 Tailwind에서는 margin-left, margin-right가 ml-*, mr-* 등으로 따로 구현이 되어 있었는데, 이를 margin-inline-*로 통합했습니다. 이를 통해 불필요한 반복을 제거하고, CSS의 크기를 줄일 수 있다고 합니다. 또, 아랍어나 히브리어처럼 오른쪽으로 왼쪽으로 작성되는 RTL 언어를 지원하기 위함이라고 합니다.

3. 간소화된 설치 방법

기존 설치 방법보다 훨씬 단순해졌습니다.

# 1. 테일윈드 설치
npm install -D tailwindcss

# 2. tailwind.config.js 만들기
npx tailwindcss init

# 3. tailwind.config.js 안에 템플릿 패스 추가
export default {
	content: ["./src/**/*.{html, js}"],
	theme: {
		extend: {},
	},
	plugins: [],
}

# 4. 루트 CSS파일에 테일윈드 지시자 추가
@tailwind base;
@tailwind components;
@tailwind utilities;

이 과정이

# 1. 테일윈드 설치
npm install tailwindcss

# 2. 루트 CSS파일에 추가
@import "tailwindcss";

로 간소화됐습니다.

4. First-Party Vite 플러그인

이제 Vite의 First-Party로, PostCSS를 사용하지 않고 통합할 수 있습니다.

// vite.config.ts

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

5. 자동 컨텐츠 감지 기능

v3.x에서는 tailwind.config.js에 다음과 같은 설정이 필요했습니다.

// tailwind.config.js

module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx,html}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
};

이걸 해주지 않으면 Tailwind는 어떤 HTML, CSS, JS 파일에서 클래스를 추출해야 할지 몰라서 필요한 유틸리티 CSS를 생성해주지 않았습니다.

v4에서는 컨텐츠를 명시하지 않아도 스스로 .gitignore을 참고해 무시할 디렉토리를 자동으로 필터링하고, 이미지, 동영상, zip파일을 무시하며, .js, .ts, .jsx, .tsx, .vue, .mdx 등 모든 소스 파일에서 클래스를 자동으로 추출합니다.

6. Import 기능 내장

v3.x에서는 다른 CSS파일을 인라인으로 사용하기 위해서는 postcss-import 라는 별도의 PostCSS 플러그인을 사용해야 했습니다.

하지만 v4.0은 플러그인 없이도 @import를 처리할 수 있습니다.

@import "tailwindcss";
@import "./reset.css";
@import "./button.css";

7. CSS 우선 구성

v4에서 개발자가 체감하는 가장 큰 변화라고 생각하는데, tailwind.config.js , tailwind.config.ts 등 JS파일로 프로젝트를 구성하는 것에서 CSS로 직접 구성하는 방식으로 전환되었습니다. 따라서 구성 파일은 자동으로 tailwind가 인식하지 않고 별도의 설정을 거쳐야 합니다.

v3에서는 다음과 같이 테마 변수를 관리했습니다.

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

하지만 v4에서는 아래와 같이 테마 변수를 설정할 수 있습니다.

@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);
  /* ... */
}

더 자세한 내용은 테마 변수를 참조해주세요.

8. CSS 테마 변수

v4에서는 모든 디자인 토큰을 CSS 변수 형태로 :root에 노출합니다.

/* 7번의 v4 테마 변수가 최종적으로 생성된 형태 */
:root {
  --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);
  /* ... */
}

따라서 이러한 값을 인라인 스타일로 쉽게 재사용하거나 Motion과 같은 라이브러리로 전달해 애니메이션을 구현할 수 있습니다.

이렇게 CSS 변수로 노출시키면 다크 모드 전환 시 보여지는 테마에 대해 런타임에 쉽게 제어할 수 있고, 토큰만 바꾸면 앱 전체 스타일이 변하므로 일관성과 유지보수에 강점을 가질 수 있습니다.

9. 동적 유틸리티 값과 변형

v3까지는 클래스 이름을 정해진 값만 사용해야 했습니다. w-71이런 값은 사용할 수 없었죠. w-71을 사용하기 위해서는 직접 tailwind.config.js에서 별도의 테마 변수를 추가해주어야 했습니다. 아니면 [value] 구문을 사용해 직접 픽셀값을 적어주어야 했구요. 예를 들면 다음과 같습니다.

<div class="w-[420px]"></div>

하지만 v4에서는 w-, h-, mt-, grid-cols-*와 같은 대부분의 유틸리티에 대해 숫자만 붙이면 자동으로 계산된 CSS를 생성해줍니다.

그리고 v3에서는 hover:, focus:, group-hover: 와 같은 가상 변형(pseudo variant)만으로 변형을 표현해야 했지만, v4부터는 data-*속성을 사용해서 직접 유틸리티를 컨트롤할 수 있습니다. 예를 들면 다음과 같습니다.

<div data-current class="opacity-75 data-current:opacity-100">
  ...
</div>

data-current 속성이 존재하면 opacity : 1이 적용되고, 없으면 0.75가 적용됩니다.

10. 모던 P3 색상 팔레트

v4에서는 색상 표현 방식이 업그레이드되었습니다.

기존 색상 모델은 rgb()였으나, 더 넓은 색 영역을 포함하며 인간의 눈으로 인식하는 방식에 맞춘 색상 모델인 oklch() 을 사용합니다. 최신 디스플레이들은 sRGB보다 넓은 P3 색 공간을 지원하므로 Tailwind는 이를 지원하기 위해 색상 모델을 변경한 것으로 보입니다.

다만 bg-blue-500이나 text-red-400과 같은 클래스 이름은 동일하게 적용되고, 내부적으로 oklch()를 사용해 색상 느낌만 미세하게 개선되어 기존 프로젝트에서도 큰 문제가 없을 것이라고 합니다.

11. 컨테이너 쿼리

v4에서는 컨테이너 쿼리 기능이 코어에 통합되어, @tailwindcss/container-queries 와 같은 별도의 플러그인이 필요하지 않습니다.

컨테이너 쿼리는 요소의 부모 컨테이너 크기에 따라 스타일을 적용할 수 있는 CSS 기능 중 하나입니다. 이를 통해 컴포넌트가 자신의 컨테이너 크기에 맞춰 반응형으로 동작할 수 있습니다. 예를 들면 다음과 같습니다.

<div class="@container">
  <div class="grid grid-cols-1 @sm:grid-cols-3 @lg:grid-cols-4">
    <!-- ... -->
  </div>
</div>

@container 클래스를 사용해 컨테이너를 정의하면, 자식 요소에서는 @sm , @lg 와 같은 변형을 통해 컨테이너의 크기에 따라 스타일을 변경시킬 수 있습니다. 더 자세한 내용은 Responsive Design에서 확인하세요.

12. 새로운 3D 변형 유틸리티

v4에서는 오랫동안 기다려온 3D 유틸리티가 도입되었습니다.

v3에는 rotate , scale , translate 유틸리티가 2D 전용이었기 때문에 입체적인 회전이나 깊이를 표현하기에는 한계가 있었습니다. 이제는 rotate-x-, rotate-y-, scale-z-, translate-z- 등 3D 변형 속성들을 유틸리티로 자유롭게 활용할 수 있습니다.

<div class="flex w-full items-center justify-center">
  <div class="perspective-distant">
    <article class="... rotate-x-51 rotate-z-43 transform-3d">
      <img src="https://media.istockphoto.com/id/1471217278/ko/%EC%82%AC%EC%A7%84/%EC%95%BC%EA%B5%AC-%EA%B2%BD%EA%B8%B0%EC%9E%A5-%EA%B2%BD%EA%B8%B0%EC%9E%A5%EC%9D%98-%EC%9E%94%EB%94%94%EC%97%90-%EC%95%BC%EA%B5%AC-%EA%B3%B5.jpg?s=612x612&w=0&k=20&c=2comykS41HVEZgI5l9nPUVh4kmT-oxAOKmgHGAgK2aM=" />
    </article>
  </div>
</div>

예를 들어 다음과 같은 코드를 작성하면

평면 이미지를 다음과 같이 3D로 변형시킬 수 있습니다. 자세한 내용은 Transforms 섹션을 참고해 주세요.

13. 확장된 그라디언트 API

v4는 그라디언트 기능도 크게 강화되었습니다. 단순한 선형 그라디언트를 넘어 다양한 색상 공간과 그라디언트 유형을 유틸리티로 제어할 수 있습니다.

13.1. 각도를 포함한 선형 그라디언트(Linear gradient angles)

선형 그라디언트는 이제 각도를 값으로 지원합니다.

<div class="bg-linear-45 from-indigo-500 via-purple-500 to-pink-500"></div>

v3에서 bg-gradient-* 였던 클래스 이름이 bg-linear-* 로 변경되었습니다.

13.2. 그라디언트 보간 수정자(Gradient interpolation modifiers)

그라디언트 색상 간 보간 방식을 제어할 수 있도록 변경되었습니다.

<div class="bg-linear-to-r/srgb from-indigo-500 to-teal-400"></div>
<div class="bg-linear-to-r/oklch from-indigo-500 to-teal-400"></div>

•

/srgb : sRGB 색상 공간 기준 보간

•

/oklch : OKLCH 기준 보간 ⇒ 색 차이가 더 큰 경우 더 자연스럽고 생생한 효과

그리고 v4의 기본 보간 방식은 OKLAB입니다.

13.3. 새로운 그라디언트 유형 추가

두 개의 새로운 그라디언트 유형이 추가되었습니다.

•

bg-conic-* : 원뿔형 그라디언트

•

bg-radial-* : 방사형 그라디언트

<div class="size-24 rounded-full bg-conic/[in_hsl_longer_hue] from-red-600 to-red-600"></div>
<div class="size-24 rounded-full bg-radial-[at_25%_25%] from-white to-zinc-900 to-75%"></div>

14. @starting-style 지원

v4에서는 새로운 CSS 기능인 @starting-style을 지원합니다. 이 기능을 활용하면 자바스크립트 없이도 요소가 처음 표시될 때 트랜지션 효과를 줄 수 있습니다.

기존에는 요소가 화면에 등장할 때 애니메이션을 적용하려면 IntersectionObserver API나 자바스크립트 이벤트를 사용해야 했지만, 이제는 Tailwind 클래스만으로도 가능합니다.

예제는 Tailwind 블로그 포스트를 확인해주세요!

15. not-* 변형

v4에서는 CSS의 :not() 선택자를 Tailwind에서 사용할 수 있도록 추가되었습니다.

v3까지는 hover:, focus: 등과 같은 조건부 상태에만 스타일을 적용할 수 있었고, 그 반대의 조건은 직접 CSS를 사용해야 했습니다. 하지만 이제는 not-hover:* , not-focus:* , not-supports-* , not-media-* 등으로 부정 조건을 표현할 수 있습니다.

<div class="not-hover:opacity-75">
  <!-- ... -->
</div>

위의 코드에서는 hover가 아닐 때 opacity가 0.75가 됩니다.

16. 그 외 다양한 신규 유틸리티 클래스들과 변형들

새로운 유틸리티 클래스들이 추가되었습니다. 자세한 내용은 블로그 포스트를 참고해주세요.

마무리하며

Tailwind CSS v4.0은 단순한 버전 업데이트가 아니라, 새로운 엔진을 이용한 성능 최적화와 모던 CSS 적용을 담은 대규모 리팩토링이라고 생각합니다. Rust로 최적화한 신규 엔진 Oxide와 모던 CSS의 적극적인 반영으로 속도와 유연함을 동시에 잡을 수 있을 것으로 예상하구요.

다만 기존 v3 유저분들은 v4에 적응하기에 시간이 조금 걸릴 것 같아요. 업데이트로 인한 변화의 폭이 크다는 것이 단점이 될 수도 있지만, 반대로 기존에 아쉬웠던 기능들이 대폭 추가되어 다양한 창의력을 발휘할 수 있는 더 좋은 라이브러리가 되었습니다. 그러므로 기존 유저분들도 적극적으로 새로운 v4를 공부해보시길 권장드립니다.

감사합니다.