Tailwind 4.0 새로워진 점

이전 두 게시물에 이어 4.0에서 새로 도입되고, 변경된 점들을 알아보자

 

1. 향상된 고성능의 엔진 도입

 

프레임워크를 다시 만든 수준으로 아키텍처 및 속도면에서 큰 개선을 이뤘다고 한다.

 

아래 표에서도 보이듯이, 빌드속도가 대량 개편되었다고 한다.

 

특히 flex, col-span-2나 font-bold와 같이 사용중인 속성을 재사용하는 증분 재빌드의 경우 대폭 속도가 상향되어 버전업을 하는 것만으로도 속도 개선을 느낄 수 있다고한다.

 

 

2. 현대 웹을 위한 Tailwind v4.0

 

3.0이후 웹 플랫폼의 많은 발전이 이루어졌고 4.0버전에선 이 최신 웹기술을 최대한 활용한다고 한다.

 

@layer을 통해 theme, base, componenets, utilities 계층을 명확히 구분이 가능하며 스타일간의 우선순위를 정밀하게 제어할 수 있다.

 

@property를 통해 사용자 정의 css변수의 속성을 명시해 애니메이션이 가능하다.

위 기능의 경우 대규모 페이지에서 성능 향상 효과를 가져온다고 한다.

 

마지막으로 color-mix() 색상간의 혼합 및 투명도 조절이 가능하며 css 변수, currentColor도 지원한다고 한다.

 

 

3. 설치 간소화

 

기존의 tailwind를 설치 후에 global.css에

 

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

 

위 코드를 최상단에 적고 해당 css를 가장 최상단 혹은 필요한 곳에 import하여 tailwind를 적용시킨곤 했는데

 

이제부턴 다음 한문장으로 설치하고,

 

npm i tailwindcss @tailwindcss/postcss

 

// postcss.config.js
export default {
  plugins: ["@tailwindcss/postcss"],
};

 

/* styles.css */
@import "tailwindcss";

 

이렇게만 선언하면 된다고 한다. 템플릿 경로 설정도 필요 없으며,Ligthning CSS 사용을 통해 벤더 프리픽싱을 자동처리해주고, 최신문법을 자동으로 변환해준다.

 

 

4. Vite와 통합 간소화

 

Vite유저의 경우 더이상 post.css에 선언할 필요 없이 Vite config에 선언하여 바로 사용하고, 더 빠른속도를 체감할 수 있다.

 

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

 

Vite 유저들은 tailwind 사용 시 초기세팅의 시간성, 복잡성

 

5. 자동 콘텐츠 감지

 

// tailwind.config.js
content: [
  './src/**/*.{html,js,ts,jsx,tsx}',
  './components/**/*.{js,ts}',
  './node_modules/@some-lib/**/*.{js}',
],

이전 3.0 버전에선 템플릿 파일의 경로를 수동으로 입력했으나 이제는 자동으로 감지해준다고 한다.

 

오래 사용했으면 익숙했을 기능들이니, 아무래도 새롭게 tailwind를 도입하는 사람들에게 여러모로 편리하게 작용할 것 같다는 생각이 든다.

 

아무튼 이제 Tailwind는 프로젝트 디렉토리를 자동으로 스캔해 클래스명을 감지하고, .gitignore에 있는 항목은 자동으로 무시한다.

 

node_modules같은 파일을 모두 스캔한다면 오랜 시간이 걸릴 것이다. 만약에 nodemodules 폴더에 있는 파일이 필요한 경우엔 어떡할까

 

그랬다면 @source를 통해 디렉티브를 수동으로 명시적으로 추가도 가능하다.

@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib";

 

 

6. CSS-first Configuration

 

내가 Tailwind 공식문서를 찾아보게된 계기로 이제는 tailwind.config.js 없이 css에서 바로설정이 가능하다.

 

이전 방식의 경우 JS로 유틸리티 및 색상을 설정하기에 파일 분산, 설정 추적의 어려움이 있었다면 이젠 CSS안에서 @theme블록으로 css 변수를 정의해 직접 설정이 가능해졌다.

 

--color-avocado-100: oklch(0.99 0 0);
--font-display: "Satoshi", "sans-serif";
--breakpoint-3xl: 1920px;
--ease-snappy: cubic-bezier(0.2, 0, 0, 1);

 

이런식으로 css내부에서 선언 후 사용하면 된다.

2025.04.08 - [코딩] - Tailwind V 4.0 config.js 어디로?

Tailwind V 4.0 config.js 어디로?

 

 

7. CSS theme variables

 

4.0 버전에선 디자인 토큰을 CSS 변수로 자동 노출이 가능하며, -@theme에 정의한 값들이 자동으로 css 변수로 변환되어

: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);
}

 

위와 같이 커스텀 속성으로 변환되어 어디서든 사용이 가능하다.

 

이렇게 css 변수로 제공되는 경우엔 런타임 시점에 접근이 가능하기에, JS나 스타일 태그에서도 바로 참조가 가능하다.

 

또한 Motion과 같은 애니메이션 라이브러리에서도 이 값을 직접 트윈하거나 전환할 수 있다는 장점이 있다.

 

 

8. Dynamic Utilities values and variants

 

유틸리티 클래스와 변형 클래스의 동작 방식이 더 유연해지고 간단해졌다고 한다.

 

그 예시로 일부 숫자기반 유틸리티만 제공했던 w, h 같은 속성의 경우엔

 

<!-- Tailwind v3 방식 (임의 값 사용) -->
<div class="w-[68px]">

<!-- Tailwind v4 방식 -->
<div class="w-17"> <!-- spacing * 17 -->

 

위와 같이 내부적으로 calc(var(--spacing)*17)이 처리되기에 사용이 가능하다고 한다.

 

 

데이터 속성 기반 variant 자동 인식

 

추가로, 데이터 속성 기반 variant는 이전엔 tailwind.config.js에서 수동 등록해야했으나 이젠 아래와 같이 바로 사용이 가능하다고 하다.

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

 

동적 spacing utility

 

spacing scale을 css변수로 설정해두고 px, mt, w, h 와 같은 spacing유틸리티가 이 변수 기반으로 동작하게된다.

 

@layer theme {
  :root {
    --spacing: 0.25rem;
  }
}

// 위를 기반으로 아래와 같이 동작
.mt-8 {
  margin-top: calc(var(--spacing) * 8);
}
.w-17 {
  width: calc(var(--spacing) * 17);
}

 

 

9.  New 3D transform utilities

 

rotate-x, y scale-z, translate-z와 같은 3D 변환 API를 추가했다.

 

 

 

10. Expanded gradient APIs

 

gradient관련한 변화도 대거 생겼다. 요즘은 gradient 색상을 많이 활용하는 추세다보니 많은 기능을 추가시키고 한 것 같다.

 

Linear Gradient Angle

말그대로 각도 value를 이제 설정할 수 있게되었다. 

 

 

또한 bg-gradient가 아닌 bg-linear로 이름을 바꿨다.

 

Gradient interpolation modifiers

색상을 보간하는 방식을 선택할 수 있게되었다.

 

 

나는 잘 모르겠으나, OKLCH 방식의 색상이 RGB보다 더 생동감 넘치는 색상을 보여준다고 한다. 

 

default는 OKLAB 방식

 

Conic and radial gradients

 

원뿔형과 반경 gradient가 추가되었다.

 

 

 

11. @starting-style support

 

starting 스타일을 통해 js가 없이 요소가 처음 등장할 때의 스타일을 정의할 수 있게 해준다.

 

<div class="transition-discrete starting:open:opacity-0 open:opacity-100">
  ...
</div>

 

위 예시의 경우 처음 열린순간엔 opacity 0으로 투명하다가 후엔 opacity 100으로 자연스럽게 나타나는 효과를 줄 수 있다.

 

이를 통해 JS없이 흔히 사용하는 등장애니메이션이 구현이 가능하다.

 

하지만 일부 브라우저서만 지원하기에, 곧 대중화될걸 기다리거나 fallback 방식을 사용하자

 

 

사용성을 간소화하면서도 퍼포먼스를 극대화한 Tailwind v4.0은, 개발자 경험을 한 단계 끌어올리는거 같고 정식 버전으로 된 이상, 개인 프로젝트부터 팀 개발까지, 4.0 버전을 채택해도 문제가 없을 것 같다