Tailwind CSS v4에서 추가, 변경, 제거된 유틸리티 클래스와 변형(Variants)을 종합 정리하고, 실전 활용 패턴을 다룹니다.
5장에서 컨테이너 쿼리를 배웠습니다. 이 장에서는 Tailwind CSS v4에서 추가되거나 변경된 유틸리티 클래스와 변형(Variants) 을 종합적으로 다룹니다. v4는 모던 CSS 기능을 적극 수용하며 다수의 새로운 유틸리티를 추가했습니다.
v4는 3D 변환을 위한 전용 유틸리티를 추가했습니다.
<!-- Z축 회전 -->
<div class="rotate-x-45">X축 45도 회전</div>
<div class="rotate-y-90">Y축 90도 회전</div>
<!-- 3D 원근감 -->
<div class="perspective-500">
<div class="rotate-y-45">원근감이 적용된 회전</div>
</div>
<!-- transform-style -->
<div class="transform-3d">
<!-- 자식 요소가 3D 공간을 공유 -->
</div>
<!-- backface-visibility -->
<div class="backface-hidden">뒷면 숨김</div>
<div class="backface-visible">뒷면 표시</div>textarea의 크기가 내용에 따라 자동 조절되는 CSS 속성입니다.
<!-- 내용에 따라 자동으로 높이 조절 -->
<textarea class="field-sizing-content w-full border rounded-md p-2"></textarea>
<!-- 고정 크기 (기본) -->
<textarea class="field-sizing-fixed w-full border rounded-md p-2"></textarea><!-- text-wrap -->
<h1 class="text-balance">제목 텍스트가 균형 있게 줄바꿈됩니다</h1>
<p class="text-pretty">본문 텍스트의 줄바꿈이 최적화됩니다</p>
<span class="text-nowrap">줄바꿈하지 않음</span>
<!-- 텍스트 그림자 -->
<h1 class="text-shadow-sm">작은 그림자</h1>
<h1 class="text-shadow-md">중간 그림자</h1>
<h1 class="text-shadow-lg">큰 그림자</h1>
<!-- color-scheme -->
<div class="scheme-light">라이트 스키마 강제</div>
<div class="scheme-dark">다크 스키마 강제</div><!-- 그라데이션 마스크 -->
<div class="mask-linear-gradient">
<img src="..." alt="..." />
</div>
<!-- mask-type -->
<svg class="mask-luminance">...</svg>
<svg class="mask-alpha">...</svg>CSS color-mix() 함수를 활용한 색상 혼합이 가능합니다.
<!-- 투명도 수정자를 통한 혼합 효과 -->
<div class="bg-primary/50 backdrop-blur-sm">
반투명 배경에 블러 효과
</div><!-- inert 속성이 있는 요소 스타일링 -->
<div class="inert:opacity-50 inert:pointer-events-none">
비활성 상태의 콘텐츠
</div>v4에서 추가된 주요 변형입니다.
<!-- starting: 전환 시작 스타일 (CSS @starting-style) -->
<dialog class="starting:opacity-0 starting:scale-95 opacity-100 scale-100 transition-all">
모달 내용
</dialog>
<!-- not-* 변형: 부정 선택자 -->
<div class="not-last:mb-4">마지막 요소 외에 아래 마진</div>
<div class="not-first:mt-4">첫 번째 요소 외에 위 마진</div>
<!-- nth-* 변형 -->
<tr class="nth-odd:bg-surface-alt">홀수 행 배경</tr>
<tr class="nth-even:bg-surface">짝수 행 배경</tr>
<li class="nth-[3n]:border-b">3번째마다 하단 테두리</li>
<!-- in-* 변형: 부모 상태 기반 -->
<div class="group" data-state="open">
<div class="in-data-[state=open]:visible">
부모가 open 상태일 때 표시
</div>
</div>starting: 변형은 CSS의 @starting-style을 활용하여, 요소가 DOM에 추가되거나 display: none에서 전환될 때 애니메이션 시작점을 정의합니다.
<!-- 다이얼로그 진입 애니메이션 -->
<dialog class="
backdrop:bg-black/50
open:opacity-100 open:scale-100
starting:open:opacity-0 starting:open:scale-95
transition-all duration-300
rounded-lg p-6
">
<h2>다이얼로그 제목</h2>
<p>내용</p>
</dialog>
<!-- popover 진입 애니메이션 -->
<div popover class="
opacity-100 translate-y-0
starting:opacity-0 starting:translate-y-2
transition-all duration-200
rounded-lg shadow-lg p-4
">
팝오버 내용
</div>@starting-style은 display: none에서 display: block으로 전환될 때(예: dialog.showModal()) CSS 트랜지션을 가능하게 합니다. 기존에는 JavaScript로 클래스를 추가/제거하거나 @keyframes를 사용해야 했던 패턴이 순수 CSS로 가능해졌습니다.
open: 변형은 <dialog>, <details>, [popover] 등의 열린 상태를 스타일링합니다.
<!-- details/summary -->
<details class="group border rounded-lg">
<summary class="p-4 cursor-pointer">
섹션 제목
<span class="group-open:rotate-90 transition-transform inline-block">
>
</span>
</summary>
<div class="p-4 pt-0">섹션 내용</div>
</details>
<!-- dialog -->
<dialog class="open:flex hidden">
모달 내용
</dialog>CSS :has() 셀렉터를 활용한 변형입니다.
<!-- 자식에 에러가 있으면 테두리 빨간색 -->
<div class="has-[.error]:border-error border rounded-lg p-4">
<input class="error" />
</div>
<!-- 체크박스가 체크되면 스타일 변경 -->
<label class="has-[:checked]:bg-primary/10 has-[:checked]:border-primary border rounded-lg p-4 flex gap-3">
<input type="checkbox" />
<span>이 옵션을 선택하세요</span>
</label>
<!-- 포커스된 자식이 있으면 스타일 변경 -->
<div class="has-[:focus]:ring-2 has-[:focus]:ring-primary rounded-lg p-4">
<input class="border rounded px-3 py-2" placeholder="입력..." />
</div>v4에서 group과 peer는 더 유연해졌습니다.
<!-- 이름 있는 group -->
<div class="group/card hover:shadow-lg">
<img class="group-hover/card:scale-105 transition" src="..." alt="..." />
<h3 class="group-hover/card:text-primary">제목</h3>
</div>
<!-- 중첩 group -->
<div class="group/outer">
<div class="group/inner">
<!-- 외부 그룹 hover에 반응 -->
<span class="group-hover/outer:text-primary">외부 hover</span>
<!-- 내부 그룹 hover에 반응 -->
<span class="group-hover/inner:underline">내부 hover</span>
</div>
</div><!-- 커스텀 프로퍼티 설정 -->
<div class="[--card-padding:2rem]">
<div class="p-[--card-padding]">카드 내용</div>
</div>
<!-- 임의 CSS 선언 -->
<div class="[mask-image:linear-gradient(to_bottom,black,transparent)]">
그라데이션 마스크
</div><!-- data 속성 기반 스타일 -->
<div data-state="active" class="data-[state=active]:bg-primary data-[state=active]:text-white">
활성 상태
</div>
<div data-loading class="data-loading:animate-pulse">
로딩 중...
</div><button
aria-expanded="true"
class="aria-expanded:bg-surface-alt aria-expanded:rotate-180"
>
펼치기
</button>
<div
aria-selected="true"
class="aria-selected:bg-primary/10 aria-selected:border-primary"
>
선택된 항목
</div>
<input
aria-invalid="true"
class="aria-invalid:border-error aria-invalid:ring-error/20"
/>v4에서 일부 유틸리티의 이름이 변경되었습니다.
| v3 | v4 | 비고 |
|---|---|---|
shadow-sm | shadow-xs | 그림자 크기 스케일 재조정 |
shadow | shadow-sm | 기본 그림자 크기 하향 |
shadow-md | shadow-md | 동일 |
ring | ring-3 | 링 두께 명시적 |
blur | blur-sm | 블러 크기 스케일 재조정 |
rounded | rounded-sm | 둥근 모서리 스케일 재조정 |
v4에서 더 이상 제공되지 않는 유틸리티입니다.
flex-grow / flex-shrink → grow / shrink (v3.0에서 이미 변경됨)decoration-slice / decoration-clone → box-decoration-slice / box-decoration-cloneoverflow-ellipsis → text-ellipsisv3에서 v4로 마이그레이션할 때 이름이 변경된 유틸리티를 반드시 확인하세요. 특히 그림자(shadow), 둥근 모서리(rounded), 링(ring) 계열은 전체 스케일이 재조정되어 같은 이름이라도 다른 크기를 나타낼 수 있습니다.
<article class="
group
relative overflow-hidden
rounded-xl border border-border
bg-surface
transition-all duration-300
hover:shadow-lg hover:border-primary/30
has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-primary
">
<!-- 배경 그라데이션 오버레이 -->
<div class="
absolute inset-0
bg-gradient-to-t from-black/60 to-transparent
opacity-0 group-hover:opacity-100
transition-opacity duration-300
"></div>
<!-- 이미지 -->
<img
class="w-full aspect-video object-cover group-hover:scale-105 transition-transform duration-500"
src="/thumbnail.jpg"
alt="썸네일"
/>
<!-- 콘텐츠 -->
<div class="relative p-4 space-y-2">
<h3 class="font-semibold text-lg group-hover:text-primary transition-colors">
<a href="/post/1" class="after:absolute after:inset-0">
포스트 제목
</a>
</h3>
<p class="text-sm text-muted line-clamp-2">
포스트 설명 텍스트입니다.
</p>
<time class="text-xs text-muted">2026-03-26</time>
</div>
</article>Tailwind CSS v4는 3D Transform, field-sizing, text-wrap, 텍스트 그림자 등 모던 CSS 기능을 유틸리티로 제공합니다. starting:, not-*, nth-*, has-* 등 새로운 변형은 복잡한 인터랙티브 UI를 순수 CSS로 구현할 수 있게 합니다. 일부 유틸리티의 이름 변경과 스케일 재조정에 주의하면서, 새로운 기능을 적극 활용하세요.
다음 장에서는 Tailwind v4의 고급 애니메이션과 트랜지션 기법을 다룹니다. @starting-style과 결합한 진입/퇴장 애니메이션, @keyframes 정의, 그리고 성능을 고려한 애니메이션 설계를 배웁니다.
이 글이 도움이 되셨나요?
관련 주제 더 보기
Tailwind CSS v4의 애니메이션 시스템, @keyframes 정의, @starting-style 활용, transition-behavior, 그리고 성능 최적화된 애니메이션 패턴을 다룹니다.
Tailwind CSS v4의 네이티브 컨테이너 쿼리 지원, @container 변형, 기존 미디어 쿼리와의 비교, 그리고 컴포넌트 기반 반응형 디자인 패턴을 다룹니다.
Tailwind CSS v4의 다크 모드 전략, CSS 커스텀 프로퍼티 기반 런타임 테마 전환, 다중 테마 패턴, 그리고 next-themes와의 통합을 실전 중심으로 다룹니다.