호버, 포커스 및 기타 상태

Tailwind의 모든 유틸리티 클래스는 클래스 이름 앞에 조건을 나타내는 변형자를 추가하여 조건부로 적용할 수 있습니다.

예를 들어, bg-sky-700 클래스를 호버 시에 적용하려면 hover:bg-sky-700 클래스를 사용합니다:

<button class="bg-sky-500 hover:bg-sky-700 ...">Save changes</button>

.btn-primary {  background-color: #0ea5e9;}.btn-primary:hover {  background-color: #0369a1;}

.bg-sky-500 {  background-color: #0ea5e9;}.hover\:bg-sky-700:hover {  background-color: #0369a1;}

Tailwind는 여러분이 필요로 할 거의 모든 상황에 대한 변형자를 포함하고 있습니다:

• :hover, :focus, :first-child, :required와 같은 의사 클래스
• ::before, ::after, ::placeholder, ::selection과 같은 의사 엘리먼트
• 반응형 브레이크포인트, 다크 모드, prefers-reduced-motion과 같은 미디어 및 기능 쿼리
• [dir="rtl"], [open]과 같은 속성 선택자
• & > *, & *와 같은 자식 선택자

이러한 변형자는 더 구체적인 상황을 타겟팅하기 위해 중첩될 수도 있습니다. 예를 들어, 다크 모드에서 중간 브레이크포인트에서 호버 시 배경색을 변경하는 경우:

<button class="dark:md:hover:bg-fuchsia-600 ...">Save changes</button>

이 가이드에서는 프레임워크에서 사용 가능한 모든 변형자, 커스텀 클래스와 함께 사용하는 방법, 심지어 자신만의 변형자를 만드는 방법까지 배울 수 있습니다.

의사 클래스(Pseudo-classes)

:hover, :focus, :active

hover, focus, active 변형을 사용하여 요소에 호버, 포커스, 활성 상태 스타일을 적용할 수 있습니다.

<button class="bg-violet-500 hover:bg-violet-600 focus:outline-2 focus:outline-offset-2 focus:outline-violet-500 active:bg-violet-700 ...">  Save changes</button>

Tailwind는 :visited, :focus-within, :focus-visible 등 다른 상호작용 상태를 위한 변형도 제공합니다.

사용 가능한 모든 의사 클래스 변형 목록은 의사 클래스 참조를 확인하세요.

:first, :last, :odd, :even

first와 last 변형을 사용하여 첫 번째 자식 또는 마지막 자식인 엘리먼트에 스타일을 적용할 수 있습니다.

<ul role="list">  {#each people as person}    <!-- 첫 번째 또는 마지막 자식일 때 상하 패딩 제거 -->    <li class="flex py-4 first:pt-0 last:pb-0">      <img class="h-10 w-10 rounded-full" src={person.imageUrl} alt="" />      <div class="ml-3 overflow-hidden">        <p class="text-sm font-medium text-gray-900 dark:text-white">{person.name}</p>        <p class="truncate text-sm text-gray-500 dark:text-gray-400">{person.email}</p>      </div>    </li>  {/each}</ul>

odd와 even 변형을 사용하여 홀수 또는 짝수 번째 자식인 엘리먼트에 스타일을 적용할 수도 있습니다.

<table>  <!-- ... -->  <tbody>    {#each people as person}      <!-- 홀수와 짝수 행에 다른 배경색 적용 -->      <tr class="odd:bg-white even:bg-gray-50 dark:odd:bg-gray-900/50 dark:even:bg-gray-950">        <td>{person.name}</td>        <td>{person.title}</td>        <td>{person.email}</td>      </tr>    {/each}  </tbody></table>

nth-*와 nth-last-* 변형을 사용하여 리스트 내 위치에 따라 자식 엘리먼트에 스타일을 적용할 수 있습니다.

<div class="nth-3:underline">  <!-- ... --></div><div class="nth-last-5:underline">  <!-- ... --></div><div class="nth-of-type-4:underline">  <!-- ... --></div><div class="nth-last-of-type-6:underline">  <!-- ... --></div>

기본적으로 원하는 숫자를 전달할 수 있으며, nth-[2n+1_of_li]와 같은 복잡한 표현식에는 임의의 값을 사용할 수 있습니다.

Tailwind는 :only-child, :first-of-type, :empty와 같은 다른 구조적 의사 클래스에 대한 변형도 포함하고 있습니다.

사용 가능한 모든 의사 클래스 변형 목록은 의사 클래스 참조를 확인하세요.

:required와 :disabled

required, invalid, disabled와 같은 변형을 사용하여 폼 엘리먼트의 다양한 상태에 스타일을 적용할 수 있습니다.

<input  type="text"  value="tbone"  disabled  class="invalid:border-pink-500 invalid:text-pink-600 focus:border-sky-500 focus:outline focus:outline-sky-500 focus:invalid:border-pink-500 focus:invalid:outline-pink-500 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none dark:disabled:border-gray-700 dark:disabled:bg-gray-800/20 ..."/>

이런 방식으로 변형을 사용하면 템플릿에서 조건부 로직을 줄일 수 있습니다. 입력 필드의 상태에 관계없이 동일한 클래스 세트를 사용할 수 있으며, 브라우저가 적절한 스타일을 자동으로 적용합니다.

Tailwind는 :read-only, :indeterminate, :checked 등 다른 폼 상태에 대한 변형도 제공합니다.

사용 가능한 모든 의사 클래스 변형 목록은 의사 클래스 참조를 확인하세요.

:has()

has-* 변형을 사용하여 자식 요소의 상태나 내용에 따라 스타일을 적용할 수 있습니다:

<label  class="has-checked:bg-indigo-50 has-checked:text-indigo-900 has-checked:ring-indigo-200 dark:has-checked:bg-indigo-950 dark:has-checked:text-indigo-200 dark:has-checked:ring-indigo-900 ...">  <svg fill="currentColor">    <!-- ... -->  </svg>  Google Pay  <input type="radio" class="checked:border-indigo-500 ..." /></label>

그룹의 하위 요소를 기반으로 스타일링하기

부모 엘리먼트의 하위 요소를 기반으로 스타일을 적용해야 한다면, 부모 엘리먼트에 group 클래스를 추가하고 group-has-* 변형을 사용하여 대상 엘리먼트에 스타일을 적용할 수 있습니다.

Spencer Sharp

Product Designer at planeteria.tech

Casey Jordan

Just happy to be here.

Alex Reed

A multidisciplinary designer, working at the intersection of art and technology.

alex-reed.com

Taylor Bailey

Pushing pixels. Slinging divs.

<div class="group ...">  <img src="..." />  <h4>Spencer Sharp</h4>  <svg class="hidden group-has-[a]:block ..."><!-- ... --></svg>  <p>Product Designer at <a href="...">planeteria.tech</a></p></div>

형제 엘리먼트의 하위 요소를 기반으로 스타일링하기

형제 엘리먼트의 하위 요소를 기반으로 특정 엘리먼트를 스타일링해야 한다면, 형제 엘리먼트에 peer 클래스를 추가하고 peer-has-* 변형을 사용하여 대상 엘리먼트를 스타일링할 수 있습니다.

<div>  <label class="peer ...">    <input type="checkbox" name="todo[1]" checked />    할 일 목록 만들기  </label>  <svg class="peer-has-checked:hidden ..."><!-- ... --></svg></div>

:not()

not- 변형을 사용하면 특정 조건이 참이 아닐 때 엘리먼트에 스타일을 적용할 수 있습니다.

이 기능은 다른 의사 클래스(pseudo-class) 변형과 결합할 때 특히 강력합니다. 예를 들어, not-focus:와 hover:를 함께 사용하면 엘리먼트가 포커스 상태가 아닐 때만 호버 스타일을 적용할 수 있습니다:

<button class="bg-indigo-600 hover:not-focus:bg-indigo-700">  <!-- ... --></button>

또한 not- 변형을 forced-colors나 supports와 같은 미디어 쿼리 변형과 결합하여 사용자의 환경이 특정 조건을 만족하지 않을 때만 스타일을 적용할 수도 있습니다:

<div class="not-supports-[display:grid]:flex">  <!-- ... --></div>

부모 상태에 따른 스타일링

특정 부모 엘리먼트의 상태에 따라 엘리먼트를 스타일링해야 할 때, 부모 엘리먼트에 group 클래스를 추가하고, group-* 변형 클래스(예: group-hover)를 사용해 대상 엘리먼트를 스타일링할 수 있습니다.

<a href="#" class="group ...">  <div>    <svg class="stroke-sky-500 group-hover:stroke-white ..." fill="none" viewBox="0 0 24 24">      <!-- ... -->    </svg>    <h3 class="text-gray-900 group-hover:text-white ...">New project</h3>  </div>  <p class="text-gray-500 group-hover:text-white ...">Create a new project from a variety of starting templates.</p></a>

이 패턴은 모든 의사 클래스(pseudo-class) 변형과 함께 작동합니다. 예를 들어 group-focus, group-active, 심지어 group-odd도 사용할 수 있습니다.

중첩된 그룹 구분하기

그룹을 중첩할 때, 특정 부모 그룹의 상태에 따라 스타일을 적용하려면 해당 부모에 group/{name} 클래스를 사용해 고유한 그룹 이름을 지정하고, group-hover/{name}과 같은 클래스를 사용해 변형을 포함시킬 수 있습니다.

<ul role="list">  {#each people as person}    <li class="group/item ...">      <!-- ... -->      <a class="group/edit invisible group-hover/item:visible ..." href="tel:{person.phone}">        <span class="group-hover/edit:text-gray-700 ...">Call</span>        <svg class="group-hover/edit:translate-x-0.5 group-hover/edit:text-gray-500 ..."><!-- ... --></svg>      </a>    </li>  {/each}</ul>

그룹은 원하는 대로 이름을 지을 수 있으며, 별도의 설정이 필요하지 않습니다. 마크업에서 직접 그룹 이름을 지정하면 Tailwind가 필요한 CSS를 자동으로 생성합니다.

임의 그룹

임의 값을 사용하여 대괄호 안에 원하는 선택자를 제공하면, 즉석에서 group-* 변형을 만들 수 있습니다.

<div class="group is-published">  <div class="hidden group-[.is-published]:block">    Published  </div></div>

더 세밀한 제어를 원한다면, & 문자를 사용하여 .group이 최종 선택자에서 상대적으로 위치할 곳을 표시할 수 있습니다.

<div class="group">  <div class="group-[:nth-of-type(3)_&]:block">    <!-- ... -->  </div></div>

암묵적 그룹

in-* 변형은 group과 비슷하게 동작하지만, 부모 엘리먼트에 group을 추가할 필요가 없습니다:

<div tabindex="0" class="group">  <div class="opacity-50 group-focus:opacity-100">    <div tabindex="0">      <div class="opacity-50 in-focus:opacity-100">        <!-- ... -->      </div>    </div>  </div></div>

in-* 변형은 부모 엘리먼트의 상태 변화에 반응합니다. 따라서 더 세밀한 제어가 필요하다면 group을 사용해야 합니다.

형제 요소의 상태에 따른 스타일링

형제 요소의 상태에 따라 특정 엘리먼트를 스타일링해야 할 때, 형제 요소에 peer 클래스를 추가하고 peer-* 변형 클래스(예: peer-invalid)를 사용해 대상 엘리먼트를 스타일링할 수 있습니다.

<form>  <label class="block">    <span class="...">이메일</span>    <input type="email" class="peer ..." />    <p class="invisible peer-invalid:visible ...">유효한 이메일 주소를 입력해 주세요.</p>  </label></form>

이 방식을 사용하면 플로팅 레이블과 같은 다양한 효과를 자바스크립트 없이 구현할 수 있습니다.

이 패턴은 peer-focus, peer-required, peer-disabled와 같은 모든 의사 클래스(pseudo-class) 변형에서도 동작합니다.

다만, peer 마커는 CSS의 후속 형제 결합자 동작 방식 때문에 이전 형제 요소에만 적용할 수 있습니다.

<label>  <span class="peer-invalid:text-red-500 ...">이메일</span>  <input type="email" class="peer ..." /></label>

피어 구분하기

여러 피어를 사용할 때, 특정 피어의 상태에 따라 스타일을 적용하려면 peer/{name} 클래스를 사용해 해당 피어에 고유한 이름을 부여하고, peer-checked/{name}과 같은 클래스를 사용해 변형을 포함시킬 수 있습니다.

<fieldset>  <legend>게시 상태</legend>  <input id="draft" class="peer/draft" type="radio" name="status" checked />  <label for="draft" class="peer-checked/draft:text-sky-500">초안</label>  <input id="published" class="peer/published" type="radio" name="status" />  <label for="published" class="peer-checked/published:text-sky-500">게시됨</label>  <div class="hidden peer-checked/draft:block">초안은 관리자만 볼 수 있습니다.</div>  <div class="hidden peer-checked/published:block">게시물은 사이트에 공개적으로 표시됩니다.</div></fieldset>

피어는 원하는 대로 이름을 지정할 수 있으며, 별도의 설정이 필요하지 않습니다. 마크업에서 직접 피어에 이름을 지정하면 Tailwind가 필요한 CSS를 자동으로 생성합니다.

임의의 피어(Arbitrary peers)

대괄호 안에 임의의 값으로 선택자를 제공하여 즉석에서 peer-* 변형을 만들 수 있습니다.

<form>  <label for="email">Email:</label>  <input id="email" name="email" type="email" class="is-dirty peer" required />  <div class="peer-[.is-dirty]:peer-required:block hidden">This field is required.</div>  <!-- ... --></form>

더 세밀한 제어를 위해 & 문자를 사용하여 .peer가 최종 선택자에서 상대적으로 위치할 곳을 표시할 수 있습니다.

<div>  <input type="text" class="peer" />  <div class="hidden peer-[:nth-of-type(3)_&]:block">    <!-- ... -->  </div></div>

의사 엘리먼트(Pseudo-elements)

::before와 ::after

before와 after 변형을 사용하여 ::before와 ::after 의사 엘리먼트를 스타일링할 수 있습니다:

<label>  <span class="text-gray-700 after:ml-0.5 after:text-red-500 after:content-['*'] ...">Email</span>  <input type="email" name="email" class="..." placeholder="you@example.com" /></label>

이 변형을 사용할 때, Tailwind는 기본적으로 content: ''를 자동으로 추가하므로 다른 값을 원하지 않는 한 직접 지정할 필요가 없습니다:

<blockquote class="text-center text-2xl font-semibold text-gray-900 italic dark:text-white">  When you look  <span class="relative inline-block before:absolute before:-inset-1 before:block before:-skew-y-3 before:bg-pink-500">    <span class="relative text-white dark:text-gray-950">annoyed</span>  </span>  all the time, people think that you're busy.</blockquote>

Tailwind 프로젝트에서 대부분의 경우 ::before와 ::after 의사 엘리먼트가 실제로 필요하지 않다는 점을 알아두세요. 일반적으로 실제 HTML 엘리먼트를 사용하는 것이 더 간단합니다.

예를 들어, 위의 디자인을 ::before 의사 엘리먼트 대신 <span>을 사용하여 구현한 예제입니다. 이 방법은 더 읽기 쉽고 실제로 코드도 더 적습니다:

<blockquote class="text-center text-2xl font-semibold text-gray-900 italic">  When you look  <span class="relative">    <span class="absolute -inset-1 block -skew-y-3 bg-pink-500" aria-hidden="true"></span>    <span class="relative text-white">annoyed</span>  </span>  all the time, people think that you're busy.</blockquote>

before와 after는 의사 엘리먼트의 내용이 실제로 DOM에 포함되지 않고 사용자가 선택할 수 없는 상황에서 사용하세요.

::placeholder

placeholder 변형을 사용하여 입력 필드나 텍스트 영역의 플레이스홀더 텍스트를 스타일링할 수 있습니다.

<input  class="placeholder:text-gray-500 placeholder:italic ..."  placeholder="Search for anything..."  type="text"  name="search"/>

::file

파일 입력 버튼을 file 변형을 사용하여 스타일링하는 방법:

프로필 사진 선택

<input  type="file"  class="file:mr-4 file:rounded-full file:border-0 file:bg-violet-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-violet-700 hover:file:bg-violet-100 dark:file:bg-violet-600 dark:file:text-violet-100 ..."/>

::marker

리스트의 숫자나 불릿을 스타일링하려면 marker 변형을 사용하세요:

<ul role="list" class="list-disc marker:text-sky-400 ...">  <li>포르치니 버섯 5컵 (다진 것)</li>  <li>올리브 오일 1/2컵</li>  <li>셀러리 3파운드</li></ul>

marker 변형은 상속 가능하도록 설계되었습니다. 따라서 <li> 엘리먼트에 직접 사용할 수도 있지만, 부모 엘리먼트에 적용하여 반복을 피할 수도 있습니다.

::selection

selection 변형을 사용하여 활성 텍스트 선택 영역을 스타일링할 수 있습니다:

<div class="selection:bg-fuchsia-300 selection:text-fuchsia-900">  <p>    그래서 나는 물속으로 걸어 들어가기 시작했습니다. 여러분에게 거짓말하지 않겠습니다. 나는 무서웠어요. 하지만 계속 나아갔고, 파도를 지나면서 이상한 평온함이 찾아왔습니다. 그것이 신의 개입인지, 모든 생명체의 유대감인지는 모르겠지만, 제리에게 말씀드리죠. 그 순간 나는 <em>해양 생물학자</em>였습니다.  </p></div>

selection 변형은 상속 가능하도록 설계되었습니다. 따라서 트리 내 어디에든 추가하면 모든 하위 엘리먼트에 적용됩니다.

이를 통해 전체 사이트에서 브랜드 색상과 일치하도록 선택 영역 색상을 쉽게 설정할 수 있습니다:

<html>  <head>    <!-- ... -->  </head>  <body class="selection:bg-pink-300">    <!-- ... -->  </body></html>

::first-line과 ::first-letter

블록 콘텐츠의 첫 번째 줄을 스타일링하려면 first-line 변형을 사용하고, 첫 번째 글자는 first-letter 변형을 사용합니다:

<div class="text-gray-700">  <p    class="first-letter:float-left first-letter:mr-3 first-letter:text-7xl first-letter:font-bold first-letter:text-gray-900 first-line:tracking-widest first-line:uppercase"  >    Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"?  </p>  <p class="mt-6">Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot.</p></div>

::backdrop

네이티브 <dialog> 엘리먼트의 배경을 스타일링하려면 backdrop 변형을 사용하세요:

<dialog class="backdrop:bg-gray-50">  <form method="dialog">    <!-- ... -->  </form></dialog>

프로젝트에서 네이티브 <dialog> 엘리먼트를 사용한다면, open 변형을 사용하여 열림/닫힘 상태 스타일링에 대해서도 읽어보는 것이 좋습니다.

미디어와 기능 쿼리

반응형 브레이크포인트

특정 브레이크포인트에서 엘리먼트를 스타일링하려면 md나 lg 같은 반응형 변형을 사용하세요.

예를 들어, 이 코드는 모바일에서는 3열 그리드, 중간 너비 화면에서는 4열 그리드, 큰 너비 화면에서는 6열 그리드를 렌더링합니다:

<div class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6">  <!-- ... --></div>

뷰포트 대신 부모 엘리먼트의 너비를 기준으로 엘리먼트를 스타일링하려면 @md나 @lg 같은 변형을 사용하세요:

<div class="@container">  <div class="flex flex-col @md:flex-row">    <!-- ... -->  </div></div>

이 기능들이 어떻게 동작하는지 자세히 알아보려면 반응형 디자인 문서를 확인하세요.

prefers-color-scheme

prefers-color-scheme 미디어 쿼리는 사용자가 라이트 모드와 다크 모드 중 어떤 것을 선호하는지 알려줍니다. 이 설정은 일반적으로 운영체제 수준에서 구성됩니다.

라이트 모드를 대상으로 할 때는 기본 유틸리티를 사용하고, 다크 모드를 위한 스타일을 제공하려면 dark 변형을 사용하세요.

<div class="bg-white dark:bg-gray-900 ...">  <!-- ... -->  <h3 class="text-gray-900 dark:text-white ...">거꾸로 쓰기</h3>  <p class="text-gray-500 dark:text-gray-400 ...">    제로 그래비티 펜은 거꾸로를 포함한 어떤 방향에서도 사용할 수 있습니다. 심지어 우주에서도 작동합니다.  </p></div>

이 기능이 어떻게 동작하는지 더 자세히 알아보려면 다크 모드 문서를 확인하세요.

prefers-reduced-motion

prefers-reduced-motion 미디어 쿼리는 사용자가 불필요한 동작을 최소화하도록 요청했는지 여부를 알려줍니다.

사용자가 동작을 줄이도록 요청한 경우, motion-reduce 변형을 사용하여 조건부로 스타일을 추가할 수 있습니다:

<button type="button" class="bg-indigo-500 ..." disabled>  <svg class="animate-spin motion-reduce:hidden ..." viewBox="0 0 24 24"><!-- ... --></svg>  처리 중...</button>

Tailwind는 또한 사용자가 동작을 줄이도록 요청하지 않은 경우에만 스타일을 추가하는 motion-safe 변형을 포함합니다. 이는 motion-reduce 헬퍼를 사용할 때 많은 스타일을 "되돌려야" 하는 상황에서 유용할 수 있습니다:

<!-- `motion-reduce`를 사용하면 많은 스타일을 "되돌려야" 할 수 있습니다 --><button class="transition hover:-translate-y-0.5 motion-reduce:transition-none motion-reduce:hover:translate-y-0 ...">  변경 사항 저장</button><!-- 이러한 상황에서 `motion-safe`를 사용하면 코드가 더 적습니다 --><button class="motion-safe:transition motion-safe:hover:-translate-x-0.5 ...">변경 사항 저장</button>

prefers-contrast

prefers-contrast 미디어 쿼리는 사용자가 더 높거나 낮은 대비를 요청했는지 여부를 알려줍니다.

사용자가 더 높은 대비를 요청한 경우 스타일을 조건부로 추가하려면 contrast-more 변형을 사용하세요:

<label class="block">  <span class="block text-sm font-medium text-gray-700">Social Security Number</span>  <input    class="border-gray-200 placeholder-gray-400 contrast-more:border-gray-400 contrast-more:placeholder-gray-500 ..."  />  <p class="text-gray-600 opacity-10 contrast-more:opacity-100 ...">We need this to steal your identity.</p></label>

Tailwind는 또한 사용자가 더 낮은 대비를 요청한 경우 스타일을 조건부로 추가할 수 있는 contrast-less 변형도 포함하고 있습니다.

forced-colors

forced-colors 미디어 쿼리는 사용자가 강제 색상 모드를 사용 중인지 여부를 나타냅니다. 이 모드는 사이트의 색상을 사용자가 정의한 색상 팔레트로 덮어쓰며, 텍스트, 배경, 링크, 버튼 등의 색상을 변경합니다.

forced-colors 변형을 사용하여 사용자가 강제 색상 모드를 활성화했을 때 조건부로 스타일을 추가할 수 있습니다:

<label>  <input type="radio" class="appearance-none forced-colors:appearance-auto" />  <p class="hidden forced-colors:block">Cyan</p>  <div class="bg-cyan-200 forced-colors:hidden ..."></div>  <div class="bg-cyan-500 forced-colors:hidden ..."></div></label>

not-forced-colors 변형을 사용하여 사용자가 강제 색상 모드를 사용하지 않을 때 스타일을 적용할 수 있습니다:

<div class="not-forced-colors:appearance-none ...">  <!-- ... --></div>

Tailwind는 또한 강제 색상 조정을 위한 forced color adjust 유틸리티를 제공합니다.

orientation

portrait과 landscape 변형을 사용하여 뷰포트가 특정 방향일 때 스타일을 조건부로 추가할 수 있습니다:

<div>  <div class="portrait:hidden">    <!-- ... -->  </div>  <div class="landscape:hidden">    <p>이 경험은 가로 방향으로 보기 위해 설계되었습니다. 사이트를 보려면 기기를 회전해 주세요.</p>  </div></div>

print

print 변형을 사용하면 문서가 인쇄될 때만 적용되는 스타일을 조건부로 추가할 수 있습니다.

<div>  <article class="print:hidden">    <h1>나의 비밀 피자 레시피</h1>    <p>이 레시피는 비밀이며, 누구와도 공유해서는 안 됩니다.</p>    <!-- ... -->  </article>  <div class="hidden print:block">정말로 이걸 인쇄하려고 하시나요? 이건 비밀입니다!</div></div>

@supports

supports-[...] 변형을 사용하여 사용자의 브라우저에서 특정 기능이 지원되는지 여부에 따라 스타일을 적용할 수 있습니다:

<div class="flex supports-[display:grid]:grid ...">  <!-- ... --></div>

내부적으로 supports-[...] 변형은 @supports 규칙을 생성하며, 대괄호 안에 @supports (...)와 함께 사용할 수 있는 모든 것을 받아들입니다. 예를 들어 속성/값 쌍이나 and, or를 사용한 표현식도 가능합니다.

간결성을 위해 특정 값이 아닌 속성 자체가 지원되는지 확인하려면 속성 이름만 지정하면 됩니다:

<div class="bg-black/75 supports-backdrop-filter:bg-black/25 supports-backdrop-filter:backdrop-blur ...">  <!-- ... --></div>

not-supports-[...] 변형을 사용하여 사용자의 브라우저에서 특정 기능이 지원되지 않는 경우에 스타일을 적용할 수 있습니다:

<div class="not-supports-[display:grid]:flex">  <!-- ... --></div>

프로젝트에서 자주 사용하는 @supports 규칙에 대한 단축키를 설정하려면 supports-* 네임스페이스에 새로운 변형을 생성하면 됩니다:

@variant supports-grid {  @supports (display: grid) {    @slot;  }}

그런 다음 프로젝트에서 이러한 커스텀 supports-* 변형을 사용할 수 있습니다:

<div class="supports-grid:grid">  <!-- ... --></div>

@starting-style

starting 변형을 사용하면 엘리먼트가 DOM에 처음 렌더링될 때, 또는 display: none에서 보이는 상태로 전환될 때의 모습을 설정할 수 있습니다.

<div>  <button popovertarget="my-popover">업데이트 확인</button>  <div popover id="my-popover" class="opacity-0 starting:open:opacity-0 ...">    <!-- ... -->  </div></div>

속성 선택자

ARIA 상태

ARIA 속성을 기반으로 조건부 스타일을 적용하려면 aria-* 변형을 사용하세요.

예를 들어, aria-checked 속성이 true로 설정되었을 때 bg-sky-700 클래스를 적용하려면 aria-checked:bg-sky-700 클래스를 사용하세요:

<div aria-checked="true" class="bg-gray-600 aria-checked:bg-sky-700">  <!-- ... --></div>

기본적으로 가장 일반적인 불리언 ARIA 속성에 대한 변형이 포함되어 있습니다:

새로운 변형을 생성하여 어떤 aria-* 변형을 사용할지 커스터마이즈할 수 있습니다:

@variant aria-asc (&[aria-sort="ascending"]);@variant aria-desc (&[aria-sort="descending"]);

프로젝트에 포함시키기 어려운 일회성 aria 변형을 사용하거나, 특정 값을 가지는 더 복잡한 ARIA 속성을 사용해야 하는 경우, 대괄호를 사용하여 임의의 값으로 즉석에서 속성을 생성할 수 있습니다:

<table>  <thead>    <tr>      <th        aria-sort="ascending"        class="aria-[sort=ascending]:bg-[url('/img/down-arrow.svg')] aria-[sort=descending]:bg-[url('/img/up-arrow.svg')]"      >        Invoice #      </th>      <!-- ... -->    </tr>  </thead>  <!-- ... --></table>

ARIA 상태 변형은 group-aria-*와 peer-aria-* 변형을 사용하여 부모와 형제 엘리먼트를 대상으로 할 수도 있습니다:

<table>  <thead>    <tr>    <th aria-sort="ascending" class="group">      Invoice #      <svg class="group-aria-[sort=ascending]:rotate-0 group-aria-[sort=descending]:rotate-180"><!-- ... --></svg>    </th>    <!-- ... -->    </tr>  </thead>  <!-- ... --></table>

데이터 속성

데이터 속성을 기반으로 조건부 스타일을 적용하려면 data-* 변형을 사용하세요.

특정 값이 아닌 데이터 속성의 존재 여부만 확인하려면 속성 이름만 지정하면 됩니다:

<!-- 적용됨 --><div data-active class="border border-gray-300 data-active:border-purple-500">  <!-- ... --></div><!-- 적용되지 않음 --><div class="border border-gray-300 data-active:border-purple-500">  <!-- ... --></div>

특정 값을 확인해야 한다면 임의의 값을 사용할 수 있습니다:

<!-- 적용됨 --><div data-size="large" class="data-[size=large]:p-8">  <!-- ... --></div><!-- 적용되지 않음 --><div data-size="medium" class="data-[size=large]:p-8">  <!-- ... --></div>

또는 프로젝트에서 자주 사용하는 데이터 속성에 대한 단축키를 data-* 네임스페이스에 새로운 변형으로 추가할 수 있습니다:

@import "tailwindcss";@variant data-checked (&[data-ui~="checked"]);

이제 프로젝트에서 이 커스텀 data-* 변형을 사용할 수 있습니다:

<div data-ui="checked active" class="data-checked:underline">  <!-- ... --></div>

RTL 지원

다국어 레이아웃을 구축할 때, rtl과 ltr 변형을 사용해 오른쪽에서 왼쪽(우에서 좌) 및 왼쪽에서 오른쪽(좌에서 우) 모드에서 조건부로 스타일을 추가할 수 있습니다.

좌에서 우

Tom Cook

Director of Operations

우에서 좌

تامر كرم

الرئيس التنفيذي

<div class="group flex items-center">  <img class="h-12 w-12 shrink-0 rounded-full" src="..." alt="" />  <div class="ltr:ml-3 rtl:mr-3">    <p class="text-gray-700 group-hover:text-gray-900 ...">...</p>    <p class="text-gray-500 group-hover:text-gray-700 ...">...</p>  </div></div>

이 변형들은 좌에서 우와 우에서 좌 레이아웃을 모두 지원해야 하는 사이트를 구축할 때만 유용합니다. 단일 방향만 지원하는 사이트를 구축한다면, 이 변형들은 필요하지 않습니다. 콘텐츠에 맞는 스타일을 적용하면 됩니다.

열림/닫힘 상태

<details>나 <dialog> 엘리먼트가 열린 상태일 때 스타일을 조건부로 추가하려면 open 변형을 사용하세요:

<details class="border border-transparent open:border-black/10 open:bg-gray-100 ..." open>  <summary class="text-sm leading-6 font-semibold text-gray-900 select-none">왜 오발틴이라고 부를까요?</summary>  <div class="mt-3 text-sm leading-6 text-gray-600">    <p>머그는 둥글고, 병도 둥글잖아요. 라운드틴이라고 불러야죠.</p>  </div></details>

이 변형은 팝오버를 위한 :popover-open 의사 클래스도 대상으로 합니다:

<div>  <button popovertarget="my-popover">팝오버 열기</button>  <div popover id="my-popover" class="opacity-0 open:opacity-100 ...">    <!-- ... -->  </div></div>

비활성 엘리먼트 스타일링

inert 변형을 사용하면 inert 속성이 적용된 엘리먼트에 스타일을 적용할 수 있습니다:

<form>  <legend>알림 설정</legend>  <fieldset>    <input type="radio" />    <label> 커스텀 </label>    <fieldset inert class="inert:opacity-50">      <!-- ... -->    </fieldset>    <input type="radio" />    <label> 모든 알림 </label>  </fieldset></form>

이 기능은 콘텐츠의 특정 부분이 상호작용하지 않는다는 것을 시각적으로 명확히 보여주는 데 유용합니다.

자식 선택자

직접 자식 요소 스타일링

일반적으로 유틸리티 클래스를 자식 요소에 직접 적용하는 것이 좋지만, 제어할 수 없는 직접 자식 요소를 스타일링해야 할 때는 * 변형을 사용할 수 있습니다.

<div>  <h2>Categories<h2>  <ul class="*:rounded-full *:border *:border-sky-100 *:bg-sky-50 *:px-2 *:py-0.5 dark:text-sky-300 dark:*:border-sky-500/15 dark:*:bg-sky-500/10 ...">    <li>Sales</li>    <li>Marketing</li>    <li>SEO</li>    <!-- ... -->  </ul></div>

생성된 자식 선택자의 명시도 때문에 자식 요소 자체에 유틸리티를 직접 적용하여 스타일을 덮어쓰는 것은 작동하지 않는다는 점에 유의해야 합니다.

<ul class="*:bg-sky-50 ...">  <li class="bg-red-50 ...">Sales</li>  <li>Marketing</li>  <li>SEO</li>  <!-- ... --></ul>

모든 하위 요소에 스타일 적용하기

*와 마찬가지로, ** 변형은 엘리먼트의 자식 요소에 스타일을 적용하는 데 사용할 수 있습니다. 주요 차이점은 **가 직접적인 자식뿐만 아니라 모든 하위 요소에 스타일을 적용한다는 점입니다. 이는 다른 변형과 결합하여 선택 대상을 좁히는 데 특히 유용합니다:

<ul class="**:data-avatar:size-12 **:data-avatar:rounded-full ...">  {#each items as item}    <li>      <img src={item.src} data-avatar />      <p>{item.name}</p>    </li>  {/each}</ul>

커스텀 변형

임의의 변형 사용하기

임의의 값을 사용해 유틸리티 클래스에 커스텀 값을 적용할 수 있는 것처럼, 임의의 변형을 사용하면 HTML에서 직접 커스텀 선택자 변형을 작성할 수 있습니다.

임의의 변형은 선택자를 나타내는 형식 문자열로, 대괄호로 감싸져 있습니다. 예를 들어, 이 임의의 변형은 엘리먼트에 is-dragging 클래스가 있을 때 커서를 grabbing으로 변경합니다:

<ul role="list">  {#each items as item}    <li class="[&.is-dragging]:cursor-grabbing">{item}</li>  {/each}</ul>

임의의 변형은 Tailwind의 다른 변형들과 마찬가지로 내장 변형이나 다른 임의의 변형과 함께 사용할 수 있습니다:

<ul role="list">  {#each items as item}    <li class="[&.is-dragging]:active:cursor-grabbing">{item}</li>  {/each}</ul>

선택자에 공백이 필요하다면 언더스코어를 사용할 수 있습니다. 예를 들어, 이 임의의 변형은 클래스를 추가한 엘리먼트 내부의 모든 p 엘리먼트를 선택합니다:

<div class="[&_p]:mt-4">  <p>Lorem ipsum...</p>  <ul>    <li>      <p>Lorem ipsum...</p>    </li>    <!-- ... -->  </ul></div>

또한 @media나 @supports와 같은 at-rule을 임의의 변형에서 사용할 수 있습니다:

<div class="flex [@supports(display:grid)]:grid">  <!-- ... --></div>

at-rule 커스텀 변형에서는 전처리기와 중첩할 때와 마찬가지로 & 플레이스홀더가 필요하지 않습니다.

커스텀 변형 등록하기

프로젝트에서 동일한 임의의 변형을 여러 번 사용한다면, 커스텀 변형을 만드는 것이 좋습니다:

@variant pointer-coarse {  @media (pointer: coarse) {    @slot;  }}

이제 HTML에서 pointer-coarse:<utility> 변형을 사용할 수 있습니다:

<button class="pointer-coarse:size-12 ..."></button>

중첩이 필요하지 않은 경우, 짧은 구문을 사용하여 변형을 만들 수 있습니다:

@variant pointer-coarse (@media (pointer: coarse));

커스텀 변형에 여러 규칙이 있는 경우, 서로 중첩할 수 있습니다:

@variant any-hover {  @media (any-hover: hover) {    &:hover {      @slot;    }  }}

부록

빠른 참조

Tailwind에 기본으로 포함된 모든 변형(variant)에 대한 빠른 참조 표입니다.

의사 클래스(Pseudo-class) 참조

이 섹션은 가이드 초반에 있는 의사 클래스 문서를 보완하기 위해 Tailwind에 포함된 모든 의사 클래스 변형에 대한 예제를 종합적으로 정리한 목록입니다.

:hover

마우스 커서를 요소 위에 올렸을 때 스타일을 적용하려면 hover 변형을 사용합니다:

<div class="bg-black hover:bg-white ...">  <!-- ... --></div>

:focus

focus 변형을 사용해 요소가 포커스를 받았을 때 스타일을 적용할 수 있습니다:

<input class="border-gray-300 focus:border-blue-400 ..." />

:focus-within

focus-within 변형을 사용하여 엘리먼트나 그 하위 요소 중 하나가 포커스를 받을 때 스타일을 적용할 수 있습니다:

<div class="focus-within:shadow-lg ...">  <input type="text" /></div>

:focus-visible

키보드를 사용해 요소에 포커스가 맞춰졌을 때 스타일을 적용하려면 focus-visible 변형을 사용하세요:

<button class="focus-visible:outline-2 ...">Submit</button>

:active

active 변형을 사용해 요소가 눌렸을 때 스타일을 적용할 수 있습니다:

<button class="bg-blue-500 active:bg-blue-600 ...">Submit</button>

:visited

방문한 링크에 스타일을 적용하려면 visited 변형을 사용하세요:

<a href="https://seinfeldquotes.com" class="text-blue-600 visited:text-purple-600 ..."> Inspiration </a>

:target

현재 URL의 프래그먼트와 일치하는 ID를 가진 엘리먼트에 스타일을 적용하려면 target 변형을 사용하세요:

<div id="about" class="target:shadow-lg ...">  <!-- ... --></div>

:first-child

first 변형을 사용하여 첫 번째 자식 엘리먼트에 스타일을 적용합니다:

<ul>  {#each people as person}    <li class="py-4 first:pt-0 ...">      <!-- ... -->    </li>  {/each}</ul>

:last-child

last 변형을 사용하여 마지막 자식 엘리먼트에 스타일을 적용합니다:

<ul>  {#each people as person}    <li class="py-4 last:pb-0 ...">      <!-- ... -->    </li>  {/each}</ul>

:only-child

only 변형을 사용하여 엘리먼트가 유일한 자식일 때 스타일을 적용합니다:

<ul>  {#each people as person}    <li class="py-4 only:py-0 ...">      <!-- ... -->    </li>  {/each}</ul>

:nth-child(odd)

odd 변형을 사용하여 홀수 번째 자식 엘리먼트에 스타일을 적용합니다:

<table>  {#each people as person}    <tr class="bg-white odd:bg-gray-100 ...">      <!-- ... -->    </tr>  {/each}</table>

:nth-child(even)

even 변형을 사용하여 짝수 번째 자식 엘리먼트에 스타일을 적용하는 방법입니다:

<table>  {#each people as person}    <tr class="bg-white even:bg-gray-100 ...">      <!-- ... -->    </tr>  {/each}</table>

:first-of-type

first-of-type 변형을 사용하여 특정 타입의 첫 번째 자식 엘리먼트에 스타일을 적용할 수 있습니다:

<nav>  <img src="/logo.svg" alt="Vandelay Industries" />  {#each links as link}    <a href="#" class="ml-2 first-of-type:ml-6 ...">      <!-- ... -->    </a>  {/each}</nav>

:last-of-type

last-of-type 변형을 사용하여 특정 타입의 마지막 자식 엘리먼트에 스타일을 적용할 수 있습니다:

<nav>  <img src="/logo.svg" alt="Vandelay Industries" />  {#each links as link}    <a href="#" class="mr-2 last-of-type:mr-6 ...">      <!-- ... -->    </a>  {/each}  <button>More</button></nav>

:only-of-type

only-of-type 변형을 사용하여 특정 타입의 유일한 자식 엘리먼트에 스타일을 적용할 수 있습니다:

<nav>  <img src="/logo.svg" alt="Vandelay Industries" />  {#each links as link}    <a href="#" class="mx-2 only-of-type:mx-6 ...">      <!-- ... -->    </a>  {/each}  <button>More</button></nav>

:nth-child()

특정 위치에 있는 엘리먼트에 스타일을 적용하려면 nth 변형을 사용합니다:

<nav>  <img src="/logo.svg" alt="Vandelay Industries" />  {#each links as link}    <a href="#" class="mx-2 nth-3:mx-6 nth-[3n+1]:mx-7 ...">      <!-- ... -->    </a>  {/each}  <button>More</button></nav>

:nth-last-child()

nth-last 변형을 사용하여 끝에서 특정 위치에 있는 엘리먼트에 스타일을 적용할 수 있습니다:

<nav>  <img src="/logo.svg" alt="Vandelay Industries" />  {#each links as link}    <a href="#" class="mx-2 nth-last-3:mx-6 nth-last-[3n+1]:mx-7 ...">      <!-- ... -->    </a>  {/each}  <button>More</button></nav>

:nth-of-type()

동일한 타입의 엘리먼트 중 특정 위치에 있는 엘리먼트에 스타일을 적용하려면 nth-of-type 변형을 사용합니다:

<nav>  <img src="/logo.svg" alt="Vandelay Industries" />  {#each links as link}    <a href="#" class="mx-2 nth-of-type-3:mx-6 nth-of-type-[3n+1]:mx-7 ...">      <!-- ... -->    </a>  {/each}  <button>More</button></nav>

:nth-last-of-type()

동일한 타입의 엘리먼트 중 끝에서 특정 위치에 있는 엘리먼트를 스타일링하려면 nth-last-of-type 변형을 사용합니다:

<nav>  <img src="/logo.svg" alt="Vandelay Industries" />  {#each links as link}    <a href="#" class="mx-2 nth-last-of-type-3:mx-6 nth-last-of-type-[3n+1]:mx-7 ...">      <!-- ... -->    </a>  {/each}  <button>More</button></nav>

:empty

empty 변형을 사용해 내용이 없는 엘리먼트에 스타일을 적용할 수 있습니다:

<ul>  {#each people as person}    <li class="empty:hidden ...">{person.hobby}</li>  {/each}</ul>

:disabled

disabled 상태일 때 입력 필드에 스타일을 적용하려면 disabled 변형을 사용하세요:

<input class="disabled:opacity-75 ..." />

:enabled

enabled 변형을 사용해 활성화된 입력 필드에 스타일을 적용할 수 있습니다. 이 기능은 특정 요소가 비활성화되지 않았을 때만 다른 스타일을 적용하고 싶을 때 유용합니다.

<input class="enabled:hover:border-gray-400 disabled:opacity-75 ..." />

:checked

체크박스나 라디오 버튼이 선택되었을 때 스타일을 적용하려면 checked 변형을 사용합니다:

<input type="checkbox" class="appearance-none checked:bg-blue-500 ..." />

:indeterminate

체크박스나 라디오 버튼을 불확정 상태로 스타일링하려면 indeterminate 변형을 사용하세요:

<input type="checkbox" class="appearance-none indeterminate:bg-gray-300 ..." />

:default

페이지가 처음 로드될 때 기본값으로 설정된 옵션, 체크박스 또는 라디오 버튼을 스타일링하려면 default 변형을 사용하세요:

<input type="checkbox" class="default:outline-2 ..." />

:optional

optional 변형을 사용하여 선택적 입력 필드에 스타일을 적용하는 방법:

<input class="optional:border-red-500 ..." />

:required

required 속성이 있는 입력 필드에 스타일을 적용하려면 required 변형을 사용하세요:

<input class="required:border-red-500 ..." />

:valid

valid 변형을 사용하여 입력이 유효할 때 스타일을 적용합니다:

<input class="valid:border-green-500 ..." />

:invalid

invalid 변형을 사용하여 입력이 유효하지 않을 때 스타일을 적용하는 방법:

<input class="invalid:border-red-500 ..." />

:in-range

in-range 변형을 사용하여 입력값이 지정된 범위 내에 있을 때 스타일을 적용할 수 있습니다:

<input min="1" max="5" class="in-range:border-green-500 ..." />

:out-of-range

out-of-range 변형을 사용하여 입력값이 지정된 범위를 벗어날 때 스타일을 적용할 수 있습니다:

<input min="1" max="5" class="out-of-range:border-red-500 ..." />

:placeholder-shown

placeholder-shown 변형을 사용하여 플레이스홀더가 표시될 때 입력 필드에 스타일을 적용합니다:

<input class="placeholder-shown:border-gray-500 ..." placeholder="you@example.com" />

:autofill

브라우저가 자동으로 채운 입력 필드에 스타일을 적용하려면 autofill 변형을 사용하세요:

<input class="autofill:bg-yellow-200 ..." />

:read-only

read-only 변형을 사용하여 읽기 전용 상태의 입력 필드에 스타일을 적용합니다:

<input class="read-only:bg-gray-100 ..." />