2025. 1. 26·약 11분

Tailwind CSS 4.0, 무엇이 달라졌나요?

이 글에서 다루는 내용

Tailwind CSS v4.0은 엔진을 다시 만들고 JavaScript 설정 대신 CSS 기반 설정을 도입했습니다. 소스 파일 자동 감지와 Vite 플러그인으로 설치 과정도 달라졌습니다.

이 글은 공식 벤치마크와 함께 캐스케이드 레이어·@property·color-mix() 같은 CSS 기능, 테마 변수, 동적 유틸리티, 컨테이너 쿼리와 3D 변환 등 주요 변경 사항을 정리합니다.

tailwindcss 공식 블로그 - Tailwind CSS v4.0

• 새로운 고성능 엔진
• 최신 CSS 기능과 지원 범위
• 간소화된 설치
• Vite 플러그인으로 통합하기
• 자동 콘텐츠 감지
• 내장 import 지원
• CSS에서 설정하기
• 디자인 토큰을 CSS 변수로 노출하기
• 동적 유틸리티 값과 유연한 변형
• 현대화된 P3 색상 팔레트
• 컨테이너 쿼리 지원
• 새로운 3D 트랜스폼 유틸리티
• 확장된 그라디언트 API
• @starting-style 지원
• not-* 변형
• 새로운 유틸리티와 변형

---

새로운 고성능 엔진

Tailwind CSS v4.0은 새 엔진으로 빌드 경로를 다시 설계했습니다.

공식 벤치마크에서는 전체 빌드가 약 3.5배, 새 CSS가 생기는 증분 빌드가 약 8배 빨랐습니다. 새 클래스를 만들 필요가 없는 증분 빌드는 35ms에서 192µs로 줄었습니다. 프로젝트와 기기마다 실제 시간은 달라질 수 있으므로 아래 수치는 같은 벤치마크 안의 비교값으로 봅니다.

이전 버전(3.4)과 비교한 빌드 시간은 다음과 같습니다.

유형	v3.4	v4.0	개선 비율
전체 빌드	378ms	100ms	3.78x
새로운 CSS 포함 증분 빌드	44ms	5ms	8.8x
새로운 CSS 없는 증분 빌드	35ms	192µs	182x

개발 중에는 flex, col-span-2, font-bold처럼 이미 생성한 클래스를 반복해서 쓰므로 CSS를 새로 만들지 않는 증분 빌드 경로를 자주 거칩니다.

💡 Tailwind CSS 빌드 과정

프로젝트에서 사용한 클래스를 찾고, 필요한 클래스만 골라 설정에 맞는 CSS를 생성합니다. 필요하면 결과를 압축합니다.

💡 증분 빌드(Incremental Build)

프로젝트 전체를 다시 컴파일하지 않고 변경된 부분에 필요한 결과만 갱신하는 빌드 방식입니다.

Tailwind CSS에서 증분 빌드는 다음과 같은 맥락에서 사용됩니다.

• 새로운 CSS가 추가된 경우: 기존 CSS에 새로운 유틸리티 클래스가 필요하면 해당 클래스만 새로 생성합니다.
• 새로운 CSS가 없는 경우: 이미 생성된 CSS를 그대로 사용하며, 컴파일 과정이 거의 필요 없습니다.

개발 서버에서는 파일을 저장할 때 전체 결과를 다시 만들지 않고 변경분만 반영할 수 있습니다.

---

최신 CSS 기능과 지원 범위

Tailwind CSS 4.0은 최신 CSS 기능을 전제로 최소 지원 브라우저 버전을 높였습니다. 업그레이드할 때는 서비스가 지원하는 브라우저 범위부터 확인해야 합니다.

---

최소 지원 브라우저 상향

• Tailwind CSS 4.0은 @property, color-mix() 등 모던 CSS 기능에 의존하므로, 최소 요구 브라우저가 Safari 16.4+, Chrome 111+, Firefox 128+로 올라갔습니다.
• 참고로 IE11 지원은 4.0에서 제거된 것이 아니라, 이미 v2.0(2020년 11월)에서 중단되었습니다.

---

브라우저 기본 기능 활용

• Tailwind CSS 4.0은 컨테이너 쿼리 등 최신 CSS 기능을 유틸리티로 제공합니다.
• 브라우저가 직접 지원하는 기능을 사용하므로 일부 스타일을 별도 플러그인이나 JavaScript 없이 작성할 수 있습니다.

---

구형 브라우저 폴리필 제거

• Tailwind가 요구하는 CSS 기능은 지원 브라우저에서 직접 처리합니다. 다만 프로젝트가 사용하는 다른 API와 더 최근에 도입된 CSS 기능의 호환성은 별도로 확인해야 합니다.
• 구형 브라우저를 위한 폴리필을 기본 산출물에 넣지 않습니다.

---

최신 CSS 기능 지원

@layer theme, base, components, utilities;
@layer utilities {
  .mx-6 {
    margin-inline: calc(var(--spacing) * 6);
  }
  .bg-blue-500\/50 {
    background-color: color-mix(
      in oklab,
      var(--color-blue-500) 50%,
      transparent
    );
  }
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

네이티브 캐스케이드 레이어

CSS의 캐스케이드 레이어(@layer) 는 스타일 규칙 묶음 사이의 우선순위를 정합니다.

@layer base {
  h1 {
    font-size: 2rem;
    color: black;
  }
}

@layer utilities {
  .text-blue {
    color: blue;
  }
}

/** 
HTML에서 <h1 class="text-blue">Hello</h1>라고 작성하면 utilities 레이어의 스타일이 base 레이어를 덮어씁니다.
**/

Tailwind는 기존에도 base, components, utilities 레이어를 관리했습니다. v4에서는 이를 CSS의 네이티브 레이어로 출력합니다.

---

등록된 커스텀 속성

@property로 CSS 커스텀 속성의 타입과 초깃값, 상속 여부를 등록합니다.

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

/**
@property를 사용해 --tw-gradient-from이라는 커스텀 프로퍼티를 등록합니다.
*/

@keyframes gradientShift {
  from {
    --tw-gradient-from: #ff0000;
  }
  to {
    --tw-gradient-from: #0000ff;
  }
}

div {
  animation: gradientShift 3s infinite alternate;
  background: linear-gradient(to right, var(--tw-gradient-from), #ffffff);
}

/**
위 코드에서 --tw-gradient-from 값을 애니메이션으로 변경하며, 그라디언트 색상을 동적으로 조정합니다.
*/

---

color-mix()

CSS 색상 혼합 함수로, 두 가지 색상을 특정 비율로 혼합할 수 있습니다.

.bg-blue-50 {
  background-color: color-mix(in oklab, blue 50%, white);
}

.bg-gray-80 {
  background-color: color-mix(in oklab, gray 80%, black);
}

---

논리적 속성

CSS의 논리적 속성(예: margin-inline, padding-block)을 사용하면 RTL과 LTR 레이아웃을 같은 규칙으로 다룰 수 있습니다.

예를 들어 margin-inline-start는 글의 진행 방향에 따라 시작 쪽 여백을 적용하므로 좌우 방향별 규칙을 따로 만들 필요가 줄어듭니다.

.card {
  margin-inline: 1rem; /* 왼쪽/오른쪽 여백 */
  padding-block: 2rem; /* 위/아래 여백 */
}

.card-rtl {
  direction: rtl; /* 오른쪽에서 왼쪽(RTL) 텍스트 방향 설정 */
  margin-inline-end: 2rem; /* 오른쪽 여백 추가 */
}

---

간소화된 설치

4.0에서는 PostCSS 플러그인을 분리하고 Tailwind를 CSS에서 한 번 import하는 설치 방식으로 바뀌었습니다.

1. Tailwind CSS 설치

npm install tailwindcss @tailwindcss/postcss postcss

2. PostCSS 플러그인 추가

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

3. Tailwind를 CSS 파일에 가져오기

@import "tailwindcss";

• CSS 진입점: @tailwind 디렉티브 대신 @import "tailwindcss"를 사용합니다.
• 소스 자동 감지: 기본적인 프로젝트에서는 템플릿 경로를 따로 나열하지 않아도 됩니다.
• CSS 변환: 벤더 프리픽스와 최신 문법 변환에 내부적으로 Lightning CSS를 사용합니다.

---

Vite 플러그인으로 통합하기

공식 @tailwindcss/vite 플러그인을 Vite 설정에 추가할 수 있습니다.

npm install tailwindcss @tailwindcss/vite

vite.config.ts

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [tailwindcss()],
});

v3에서는 Vite 프로젝트도 일반적으로 PostCSS 설정을 거쳐 Tailwind를 실행했습니다. v4에서는 전용 플러그인을 설치하고 Vite 설정에 추가하면 Tailwind 변환이 개발 서버와 빌드 과정에 직접 연결됩니다. PostCSS를 사용하는 프로젝트에는 앞 절의 @tailwindcss/postcss 방식도 남아 있습니다.

---

자동 콘텐츠 감지

Tailwind CSS 4.0은 템플릿 경로를 일일이 설정하는 대신 프로젝트 파일에서 클래스 후보를 자동으로 찾습니다.

휴리스틱 탐지

tailwind.config.js

// v3의 설정 예
export default {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
};

Tailwind CSS는 휴리스틱을 사용해 템플릿과 소스 파일을 찾습니다. 기본적인 프로젝트에서는 content 배열을 작성하지 않아도 필요한 클래스 후보를 감지합니다.

---

.gitignore 파일 기반 필터링

.gitignore에 포함된 경로와 node_modules, 바이너리 파일 등은 기본 검색 대상에서 제외됩니다. 따라서 coverage, .next, build 같은 생성 디렉터리를 보통 다시 지정할 필요가 없습니다.

---

바이너리 파일 자동 제외

이미지, 동영상, .zip 파일 같은 바이너리 파일도 자동으로 스캔 대상에서 제외됩니다.

---

@source 디렉티브

기본 검색에서 빠진 소스를 명시적으로 포함하려면 CSS 파일에서 @source 디렉티브를 사용합니다.

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

---

내장 import 지원

Tailwind CSS 4.0은 CSS의 @import 처리를 내장합니다.

v3에서 CSS 파일의 import를 한데 묶으려면 postcss-import 같은 별도 도구가 필요했습니다. v4는 이 처리를 빌드 과정에 포함합니다.

Tailwind CSS 3.x의 PostCSS 설정 예

postcss.config.js

export default {
  plugins: {
    "postcss-import": {},
    tailwindcss: {},
    autoprefixer: {},
  },
};

Tailwind CSS 4.0의 CSS 진입점 예

postcss-import 없이 @import로 다른 CSS 파일을 포함할 수 있습니다.

/* main.css */
@import "tailwindcss";
@import "./components/button.css";
@import "./components/card.css";

---

CSS에서 설정하기

기존의 JavaScript 설정 파일(tailwind.config.js) 대신 CSS에서 테마와 확장을 정의할 수 있습니다.

이전 버전 (Tailwind CSS 3.x까지)

v3까지는 tailwind.config.js에 JavaScript로 설정했습니다.

module.exports = {
  theme: {
    colors: { /* ... */ },
    screens: { /* ... */ },
  },
};

현재 버전 (Tailwind CSS 4.0)

@theme 블록에서 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);
  /* ... */
}

---

모든 디자인 토큰을 기본적으로 CSS 변수로 노출

테마 토큰은 CSS 변수로 노출되므로 다른 CSS와 인라인 스타일에서도 참조할 수 있습니다.

Tailwind CSS에서 정의한 색상·글꼴·브레이크포인트 같은 디자인 토큰은 CSS 변수로 생성됩니다. 생성된 변수는 :root 등에서 재사용할 수 있습니다. 기본적으로 사용하는 변수만 출력하며, 전부 출력하려면 @theme static을 사용합니다.

자동 생성된 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 변수이므로 인라인 스타일이나 다른 CSS에서도 바로 참조할 수 있습니다.

background-color: var(--color-avocado-100);
animation-timing-function: var(--ease-snappy);

Motion 같은 애니메이션 라이브러리에도 같은 변수를 전달할 수 있습니다.

import { motion } from "framer-motion";

const AnimatedBox = () => (
  <motion.div
    style={{ backgroundColor: "var(--color-avocado-300)" }}
    animate={{ backgroundColor: "var(--color-avocado-500)" }}
  />
);

---

동적 유틸리티 값과 유연한 변형

유틸리티 클래스는 테마 변수에서 값을 계산하므로 일부 숫자 값을 설정 파일에 미리 등록하지 않아도 됩니다.

임의 값에 대한 기본 지원

Tailwind CSS v4.0에서는 많은 유틸리티 클래스가 별도 설정 없이 특정 유형의 임의 값을 받아들입니다.

이전에는 대괄호 임의 값 문법(예: [17px])을 쓰거나 설정 파일에 값을 추가했습니다. v4에서는 grid-cols-15 같은 일부 값을 대괄호 없이도 계산합니다.

<div class="grid grid-cols-15">
  <!-- ... -->
</div>

v3에서 grid-cols-15를 쓰려면 tailwind.config.js에 값을 추가해야 했습니다. v4는 이 값을 규칙에 따라 계산하므로 바로 사용할 수 있습니다.

---

커스텀 데이터 속성 지원

Tailwind CSS v4.0에서는 커스텀 데이터 속성을 직접 타겟팅하는 유틸리티 클래스를 사용할 수 있습니다. v3에서도 data-[current] 같은 임의 변형을 사용할 수 있었습니다. v4에서는 data-current처럼 속성의 존재를 검사하는 문법이 간결해졌습니다.

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

data-current 속성이 있을 때만 opacity-100이 적용됩니다. 별도의 임의 변형 문법 없이 속성의 존재 여부를 스타일 조건으로 사용할 수 있습니다.

---

동적 간격(spacing) 유틸리티

간격 유틸리티(예: px-*, mt-*, w-*, h-*)는 기본 간격 변수를 기준으로 값을 계산합니다. 대괄호 임의 값 문법도 그대로 사용할 수 있습니다.

아래는 Tailwind CSS가 생성하는 동적 유틸리티의 CSS 코드입니다.

@layer theme {
  :root {
    --spacing: 0.25rem; /* 기본 간격 스케일 */
  }
}

@layer utilities {
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .w-17 {
    width: calc(var(--spacing) * 17);
  }
  .pr-29 {
    padding-right: calc(var(--spacing) * 29);
  }
}

간격 유틸리티는 --spacing 변수를 기준으로 값을 계산합니다. 이 변수를 재정의하면 같은 배수를 사용하는 간격 값도 함께 달라집니다.

---

현대화된 P3 색상 팔레트

Tailwind CSS 4.0의 기본 팔레트는 OKLCH를 사용하며, 지원하는 디스플레이에서는 sRGB보다 넓은 P3 색역의 색을 표현할 수 있습니다.

v3의 기본 팔레트는 sRGB 범위의 색을 사용했지만 v4 팔레트는 OKLCH로 정의됩니다. OKLCH는 밝기(L), 채도(C), 색상(H)을 다루며 sRGB 밖의 색도 표현할 수 있습니다. Tailwind 팀은 기존 팔레트의 인상을 유지하면서 색을 조정했지만, 업그레이드할 때는 실제 화면에서 색 차이를 확인해야 합니다. P3를 지원하는 디스플레이에서는 더 넓은 색역이 표시되고, 그렇지 않은 환경에서는 브라우저가 표현 가능한 범위로 처리합니다.

---

컨테이너 쿼리 지원

v3에서 플러그인으로 제공하던 컨테이너 쿼리가 v4에서는 기본 기능에 포함됐습니다.

컨테이너 쿼리는 뷰포트가 아니라 부모 컨테이너의 크기에 따라 자식의 스타일을 바꾸는 CSS 기능입니다.

주요 개선 사항

v3에서는 @tailwindcss/container-queries 플러그인으로 제공했지만 v4에서는 코어에 포함돼 별도 플러그인이 필요 없습니다.

부모 요소에 @container 클래스를 추가하고, 자식에서 컨테이너 크기 변형을 사용합니다.

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

@sm:grid-cols-3은 컨테이너 너비가 sm 기준 이상일 때 3열을, @lg:grid-cols-4는 lg 기준 이상일 때 4열을 적용합니다.

@max-*와 @min-* 조합

컨테이너 너비의 상한이나 하한을 조건으로 지정할 수 있습니다. 다음 예제는 md 미만에서 1열로 바꿉니다.

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

다음 예제는 컨테이너 너비가 md 이상이고 xl 미만일 때 요소를 숨깁니다.

<div class="@container">
  <div class="flex @min-md:@max-xl:hidden">
    <!-- ... -->
  </div>
</div>

@min-*과 @max-*를 조합하면 컨테이너 너비의 하한과 상한을 함께 지정할 수 있습니다.

---

새로운 3D 트랜스폼 유틸리티

Tailwind CSS 4.0에는 요소를 3D 공간에서 회전·이동·확대하는 유틸리티가 추가됐습니다.

회전에는 rotate-x-*, rotate-y-*, rotate-z-*, 이동에는 translate-z-*, 크기 조정에는 scale-z-*를 사용합니다. perspective-*와 perspective-origin-*으로 원근과 기준점도 정할 수 있습니다.

<div class="perspective-[1000px]">
  <div class="rotate-x-30 rotate-y-45 rotate-z-15 transform-3d">
    <!-- 3D 회전이 적용된 요소 -->
  </div>
</div>

perspective-[1000px]는 원근 거리를 1000px로 설정합니다. 안쪽 요소는 X축 30도, Y축 45도, Z축 15도로 회전합니다.

<div class="perspective-normal">
  <div class="translate-z-50 scale-z-110 transform-3d">
    <!-- Z축 이동 및 크기 조정이 적용된 요소 -->
  </div>
</div>

perspective-normal은 원근 거리를 500px로 설정합니다. perspective-dramatic, perspective-near, perspective-midrange, perspective-distant 같은 이름이 있는 값과 perspective-[750px] 같은 임의 값도 사용할 수 있습니다. translate-z-50은 기본 간격 값 기준으로 Z축 방향 12.5rem(200px) 이동하고, scale-z-110은 Z축 크기를 110%로 조정합니다.

Tailwind CSS 3.x에서는 X·Y축 회전이나 Z축 이동 같은 3D 변환을 직접 CSS로 작성해야 했습니다. v4는 이를 기본 유틸리티로 제공합니다.

---

확장된 그라디언트 API

Tailwind CSS 4.0은 그래디언트 각도와 색상 보간 방식, 원뿔형·방사형 그래디언트를 유틸리티로 제공합니다.

선형 그래디언트 각도

bg-linear-*에 각도를 직접 지정할 수 있습니다. 예를 들어 bg-linear-45는 45도 선형 그래디언트를 만듭니다.

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

기존 bg-gradient-* 클래스는 bg-linear-*로 이름이 바뀌었습니다.

---

색상 보간 모드

그래디언트의 색상 보간(interpolation) 방식을 지정할 수 있는 수정자(modifier)가 추가되었습니다.

<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 공간에서 색을 보간합니다. Tailwind CSS 4.0의 기본 보간 공간은 OKLAB입니다.

---

원뿔형·방사형 그래디언트

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>

---

@starting-style 지원

CSS @starting-style 을 사용하는 starting: 변형이 추가됐습니다. 요소가 처음 표시될 때의 시작 스타일을 JavaScript 없이 지정할 수 있습니다.

CSS의 @starting-style은 처음 표시되는 요소의 시작 스타일을 정의합니다. Tailwind의 starting: 변형을 사용하면 요소가 나타날 때 불투명도 0에서 1로 전환하는 효과 등을 작성할 수 있습니다.

<div>
  <button popovertarget="my-popover">Check for updates</button>
  <div
    popover
    id="my-popover"
    class="transition-discrete starting:open:opacity-0"
  >
    <!-- 팝오버 내용 -->
  </div>
</div>

starting:open:opacity-0은 팝오버가 처음 열릴 때 불투명도를 0으로 시작합니다. 전환 속성과 대상은 transition-* 클래스로 정하며, transition-discrete는 display처럼 불연속적으로 바뀌는 속성도 전환에 참여시킵니다.

브라우저 지원

• @starting-style은 모든 주요 최신 브라우저에서 지원됩니다. (Chrome 117+, Safari 17.5+, Firefox 129+)
• 구형 브라우저 대응이 필요하다면 폴백(fallback) 스타일을 추가하거나 JavaScript로 보완하는 편이 좋습니다.

---

not-* 변형

not-* 변형은 CSS의 :not() 선택자와 미디어 쿼리, @supports 조건을 부정합니다. 지정한 조건에 해당하지 않을 때 스타일을 적용할 수 있습니다.

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

.not-hover\:opacity-75:not(*:hover) {
  opacity: 75%;
}
@media not (hover: hover) {
  .not-hover\:opacity-75 {
    opacity: 75%;
  }
}

미디어 쿼리를 부정하여 특정 환경에서만 스타일을 적용할 수 있습니다.

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

.not-supports-hanging-punctuation\:px-4 {
  @supports not (hanging-punctuation: var(--tw)) {
    padding-inline: calc(var(--spacing) * 4);
  }
}

---

새로운 유틸리티와 변형

Tailwind CSS v4.0에서는 다음과 같은 새로운 유틸리티와 변형이 추가되었습니다.

• 새로운 inset-shadow-* 및 inset-ring-* 유틸리티 단일 요소에 최대 4개의 박스 그림자를 쌓을 수 있습니다.
• 새로운 필드 크기 조정(field-sizing) 유틸리티 JavaScript 없이 텍스트 영역의 크기를 자동으로 조정할 수 있습니다.
• 새로운 색상 스킴(color-scheme) 유틸리티 브라우저 기본 UI가 지정한 색상 모드에 맞춰 표시되게 할 수 있습니다.
• 새로운 폰트 스트레치(font-stretch) 유틸리티 다양한 너비를 지원하는 가변 글꼴(variable fonts)을 세밀하게 조정할 수 있습니다.
• 새로운 inert 변형 inert 속성으로 표시된 비상호작용 요소를 스타일링할 수 있습니다.
• 새로운 nth-* 변형 자식 요소의 순서에 따라 스타일을 적용합니다.
• 새로운 in-* 변형 group-*와 유사하지만, 별도의 group 클래스가 필요 없습니다.
• :popover-open 지원 기존 open 변형을 사용하여 열린 팝오버를 타겟팅할 수 있습니다.
• 새로운 자손(descendant) 변형 모든 자손 요소에 스타일을 적용하므로 중첩된 컴포넌트까지 영향을 받는지 확인해야 합니다.

전체 목록은 공식 문서에서 확인할 수 있습니다.

https://tailwindcss.com/blog/tailwindcss-v4#container-queries