Tailwind 4 무엇이 변했을까?

쭌로그·2025년 1월 30일

25년 1월 22일에 Tailwind 4.0이 공식 사이트를 통해 배포 되었습니다. 사내 프로젝트에서 Tailwind를 사용했기에 이번 새로운 업데이트가 눈에 들어왔습니다!! 이번 업데이트를 통해 새로운 고성능 엔진과 사용자 정의 환경을 새롭게 만들었다고합니다. 이번 업데이트를 통해 무엇이 달라졌는지 알아보겠습니다.

고성능 엔진

앞서 말한대로 Tailwind는 새로운 고성능 엔진을 선보였습니다.

전체 빌드에서는 기존의 3.x 버전보다 3.78배 뛰어난 성능을, 새로운 css가 생겼을 때에는 8.8배 뛰어난 성능을 보인다고합니다. 특히 css가 추가되지 않았을 때에는 182배나 성능이 개선되었다고합니다. 사용을 해봐야겠지만 Tailwind의 단점 중 하나인 느린 빌드 시간이 이번 업데이트를 통해 많이 개선되었으면 좋겠습니다.

쉬운 설치

기존의 Tailwind를 설치할 때에는

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

@tailwind base;
@tailwind components;
@tailwind utilities;

import { createApp } from 'vue';
import App from './App.vue';
import './assets/css/index.css';
...
createApp(App).mount('#app');

위와 같은 방식으로 설치 및 구성에 많은 시간이 소요되었습니다.

Tailwind 4에서 설치 방식은 아래와 같이 더욱 간단해졌습니다.

Install Tailwind CSS
npm i tailwindcss @tailwindcss/postcss;

Add the PostCSS plugin
export default {
plugins: ["@tailwindcss/postcss"],
};

Import Tailwind in your CSS
@import "tailwindcss";

Vite 플러그인 추가

이번 업데이트에서 가장 기쁜 소식 같습니다. vite를 사용할 때는 Vite에 postcss 플러그인을 설치해야했지만, 이제는 tailwindcss()를 추가하는 방식으로 변경되었습니다. 이를 통해 공식 문서에서는 "최소 설정을 통해 최대 성능을 이끌어낼 수 있다."라고 합니다.

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

자동 콘텐츠 감지

Tailwind CSS v3에서 항상 성가신 content배열을 구성해야 했던 걸 알고 있나요? v4.0에서 우리는 모든 것을 자동으로 감지하는 휴리스틱을 내놓았기 때문에 전혀 구성할 필요가 없습니다.

예를 들어, .gitignore버전 제어를 받지 않는 종속성이나 생성된 파일을 검사하지 않기 위해 파일의 모든 항목을 자동으로 무시합니다.

또한, 이미지, 비디오, .zip 파일 등의 모든 바이너리 확장자도 자동으로 무시합니다.

기본적으로 제외되는 소스를 명시적으로 추가해야 하는 경우에는 @sourceCSS 파일에서 바로 지시문을 사용하여 추가할 수 있습니다.

내장 import 지원

Tailwind 3.x에서는 내장 @import를 사용하기위해 postcss-import같은 추가적인 설정이 필요 없어진다고 합니다.

css 우선 구성

Tailwind CSS v4.0의 가장 큰 변화 중 하나는 프로젝트를 JavaScript로 구성하는 것에서 CSS로 구성하는 것으로 전환된 것입니다.

파일 대신 tailwind.config.js Tailwind를 가져오는 CSS 파일에서 직접 모든 사용자 정의를 구성할 수 있으므로 프로젝트에서 걱정해야 할 파일이 하나 줄어듭니다.

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

이를 통해 tailwind.config.js에서 설정할 때보다 보다 직관적으로 커스터마이징을 진행할 수 있게 되었습니다.

동적 유틸리티 값 및 변형

Tailwind 3.x 버전에서는 grid-cols-15와 같은 속성을 사용할 수 없었습니다. tailwind가 제공하는 cols의 값이 12까지만 있었기 때문입니다. 하지만 4.0 버전부터 동적 유틸리티와 값 변형을 지원하기 때문에 grid-cols-15와 같은 속성도 자동으로 생성해줍니다.
px-, mt-, w-, , 등과 같은 균일한 간격 유틸리티는 h-이제 단일 간격 스케일 변수에서 동적으로 파생되며 기본 제공 값을 허용합니다.

현대화된 p3 컬러 팔레트

기본 색상 팔레트 전체를 에서 로 업그레이드하기 위해 oklch 모델로 변경하여 넓은 색 영역을 활용해 이전에 sRGB 색 공간으로 제한을 받았던 부분의 색상을 더 생생하게 표현했습니다.

@container 쿼리 추가

v4.0에서는 컨테이너 쿼리 지원이 코어로 들어왔으므로 @tailwindcss/container-queries 플러그인이 필요하지 않습니다

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

새로운 3D 변형 유틸리티

rotate-x-, rotate-y-, scale-z-, translate-z-와 같은 새로운 클래스가 추가되었기 때문에 HTML코드에서 바로 3D 공간의 변화를 줄 수 있게 되었습니다.

그래디언트 보간 수정자

방사형과, 원불형 그레디언트, 보간 모드와 같은 다양한 기능을 활용하여 UI를 구성할 수 있게 되었습니다.

@starting-style 지원

새로운 starting변형은 새로운 CSS @starting-style기능에 대한 지원을 추가하여 요소가 처음 표시될 때 요소 속성을 전환할 수 있게 해줍니다.
아직 모든 브라우저에서 지원하는 기능이 아니기 때문에 인지하고 사용해야합니다.

not-변형

Tailwind 4.0에서는 not-변형이 추가되어 특정 변형, 선택자, 미디어 쿼리와 일치하지 않는 요소들만 스타일링 하고 싶을때 사용할 수 있는 기능입니다.
3.x버전에서는 not-변형을 지원하지 않았기 때문에 일치하지 않는 요소는 특정 Class를 추가해야 했었습니다.

새로운 유틸리티와 변형

4.0에는 다음을 포함하여 다양한 새로운 유틸리티와 변형이 추가되었습니다.

We've added a ton of other new utilities and variants to v4.0 too, including:

New inset-shadow- and inset-ring- utilities — making it possible to stack up to four layers of box shadows on a single element.
New field-sizing utilities — for auto-resizing textareas without writing a single line of JavaScript.
New color-scheme utilities — so you can finally get rid of those ugly light scrollbars in dark mode.
New font-stretch utilities — for carefully tweaking variable fonts that support different widths.
New inert variant — for styling non-interactive elements marked with the inert attribute.
New nth-* variants — for doing really clever things you'll eventually regret.
New in- variant — which is a lot like group-, but without the need for the group class.
Support for :popover-open — using the existing open variant to also target open popovers.
New descendant variant — for styling all descendant elements, for better or for worse.
Check out the relevant documentation for all of these features to learn more.