Hover, Focus 및 기타 상태 처리

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 active:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-300 ...">
  Save changes
</button>

Tailwind는 :visited, :focus-within, :focus-visible 등과 같은 다른 인터랙티브 상태를 위한 수정자도 제공합니다.

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

​첫 번째, 마지막, 홀수, 짝수

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

<ul role="list" class="p-6 divide-y divide-slate-200">
  {#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-slate-900">{person.name}</p>
        <p class="text-sm text-slate-500 truncate">{person.email}</p>
      </div>
    </li>
  {/each}
</ul>

odd와 even 수식어를 사용하여 홀수 또는 짝수 자식 엘리먼트에 스타일을 적용할 수도 있습니다:

<table>
  <!-- ... -->
  <tbody>
    {#each people as person}
      <!-- 홀수 행에는 흰색 배경, 짝수 행에는 slate-50 배경 적용 -->
      <tr class="odd:bg-white even:bg-slate-50">
        <td>{person.name}</td>
        <td>{person.title}</td>
        <td>{person.email}</td>
      </tr>
    {/each}
  </tbody>
</table>

Tailwind는 :only-child, :first-of-type, :empty와 같은 다른 구조적 의사 클래스에 대한 수식어도 제공합니다.

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

​폼 상태

required, invalid, disabled와 같은 수정자를 사용하여 다양한 상태의 폼 엘리먼트를 스타일링할 수 있습니다:

<form>
  <label class="block">
    <span class="block text-sm font-medium text-slate-700">사용자 이름</span>
    <!-- 폼 상태 수정자를 사용하면 모든 입력 필드에 동일한 클래스를 적용할 수 있습니다 -->
    <input type="text" value="tbone" disabled class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400
      focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
      disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none
      invalid:border-pink-500 invalid:text-pink-600
      focus:invalid:border-pink-500 focus:invalid:ring-pink-500
    "/>
  </label>
  <!-- ... -->
</form>

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

Tailwind는 :read-only, :indeterminate, :checked와 같은 다른 폼 상태에 대한 수정자도 제공합니다.

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

​부모 상태에 따른 스타일링 (group-{modifier})

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

<a href="#" class="group block max-w-xs mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500">
  <div class="flex items-center space-x-3">
    <svg class="h-6 w-6 stroke-sky-500 group-hover:stroke-white" fill="none" viewBox="0 0 24 24"><!-- ... --></svg>
    <h3 class="text-slate-900 group-hover:text-white text-sm font-semibold">새 프로젝트</h3>
  </div>
  <p class="text-slate-500 group-hover:text-white text-sm">다양한 시작 템플릿으로 새 프로젝트를 생성하세요.</p>
</a>

이 패턴은 모든 의사 클래스 수식어와 함께 사용할 수 있습니다. 예를 들어 group-focus, group-active, 심지어 group-odd도 가능합니다.

​중첩된 그룹 구분하기

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

<ul role="list">
  {#each people as person}
    <li class="group/item hover:bg-slate-100 ...">
      <img src="{person.imageUrl}" alt="" />
      <div>
        <a href="{person.url}">{person.name}</a>
        <p>{person.title}</p>
      </div>
      <a class="group/edit invisible hover:bg-slate-200 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-slate-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>

​형제 요소 상태에 따른 스타일링 (peer-{modifier})

_형제 요소_의 상태에 따라 다른 요소를 스타일링해야 할 때, 형제 요소에 peer 클래스를 추가하고 peer-* 수식어를 사용해 대상 요소를 스타일링할 수 있습니다. 예를 들어 peer-invalid를 사용하면 됩니다.

<form>
  <label class="block">
    <span class="block text-sm font-medium text-slate-700">Email</span>
    <input type="email" class="peer ..."/>
    <p class="mt-2 invisible peer-invalid:visible text-pink-600 text-sm">
      유효한 이메일 주소를 입력해 주세요.
    </p>
  </label>
</form>

이를 통해 플로팅 레이블과 같은 다양한 기능을 자바스크립트 없이 구현할 수 있습니다.

이 패턴은 모든 의사 클래스 수식어와 함께 사용할 수 있습니다. 예를 들어 peer-focus, peer-required, peer-disabled 등이 있습니다.

peer 마커는 CSS의 후속 형제 결합자 동작 방식 때문에 _이전 형제_에만 사용할 수 있다는 점에 유의해야 합니다.

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

​피어 구분하기

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

<fieldset>
  <legend>Published status</legend>

  <input id="draft" class="peer/draft" type="radio" name="status" checked />
  <label for="draft" class="peer-checked/draft:text-sky-500">Draft</label>

  <input id="published" class="peer/published" type="radio" name="status" />
  <label for="published" class="peer-checked/published:text-sky-500">Published</label>

  <div class="hidden peer-checked/draft:block">Drafts are only visible to administrators.</div>
  <div class="hidden peer-checked/published:block">Your post will be publicly visible on your site.</div>
</fieldset>

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

​임의의 피어

대괄호 안에 임의의 값으로 직접 선택자를 제공하여 즉석에서 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>

​직접 자식 요소 스타일링 (*-{modifier})

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

<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>

​하위 요소를 기반으로 스타일링하기 (has-{modifier})

has-* 수식어를 사용하여 하위 요소의 상태나 내용을 기반으로 엘리먼트에 스타일을 적용할 수 있습니다.

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

여러분은 has-*를 의사 클래스와 함께 사용할 수 있습니다. 예를 들어 has-[:focus]를 사용하면 특정 엘리먼트의 하위 요소 상태에 따라 스타일을 적용할 수 있습니다. 또한 has-[img]나 has-[a]와 같은 엘리먼트 선택자를 사용하여 하위 요소의 내용에 따라 스타일을 지정할 수도 있습니다.

​그룹의 하위 요소를 기반으로 스타일링하기 (group-has-{modifier})

부모 엘리먼트의 하위 요소를 기반으로 특정 엘리먼트를 스타일링해야 한다면, 부모 엘리먼트에 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-has-{modifier})

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

<fieldset>
  <legend>Today</legend>

  <div>
    <label class="peer ...">
      <input type="checkbox" name="todo[1]" checked />
      Create a to do list
    </label>
    <svg class="peer-has-[:checked]:hidden ...">
      <!-- ... -->
    </svg>
  </div>

  <!-- ... -->
</fieldset>

​Pseudo-elements

​Before와 After

before와 after 수정자를 사용하여 ::before와 ::after 의사 요소를 스타일링할 수 있습니다:

<label class="block">
  <span class="after:content-['*'] after:ml-0.5 after:text-red-500 block text-sm font-medium text-slate-700">
    Email
  </span>
  <input type="email" name="email" class="mt-1 px-3 py-2 bg-white border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1" placeholder="you@example.com" />
</label>

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

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

Tailwind 프로젝트에서 대부분의 경우 ::before와 ::after 의사 요소가 필요하지 않다는 점을 주목할 필요가 있습니다. 실제 HTML 엘리먼트를 사용하는 것이 더 간단한 경우가 많습니다.

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

<blockquote class="text-2xl font-semibold italic text-center text-slate-900">
  When you look
  <span class="relative">
    <span class="block absolute -inset-1 -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에 포함되지 않고 사용자가 선택할 수 없는 상황에서 사용하는 것이 좋습니다.

preflight 기본 스타일을 비활성화한 경우, content 속성이 기본적으로 빈 문자열로 설정되지 않으므로 before와 after 수정자를 사용할 때마다 content-['']를 포함해야 합니다.

<div class="before:content-[''] before:block ...">
  <!-- ... -->
</div>

​플레이스홀더 텍스트

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

<label class="relative block">
  <span class="sr-only">Search</span>
  <span class="absolute inset-y-0 left-0 flex items-center pl-2">
    <svg class="h-5 w-5 fill-slate-300" viewBox="0 0 20 20"><!-- ... --></svg>
  </span>
  <input class="placeholder:italic placeholder:text-slate-400 block bg-white w-full border border-slate-300 rounded-md py-2 pl-9 pr-3 shadow-sm focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 sm:text-sm" placeholder="Search for anything..." type="text" name="search"/>
</label>

​파일 입력 버튼

file 수식어를 사용하여 파일 입력 버튼을 스타일링할 수 있습니다:

프로필 사진 선택

<form class="flex items-center space-x-6">
  <div class="shrink-0">
    <img class="h-16 w-16 object-cover rounded-full" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1361&q=80" alt="Current profile photo" />
  </div>
  <label class="block">
    <span class="sr-only">프로필 사진 선택</span>
    <input type="file" class="block w-full text-sm text-slate-500
      file:mr-4 file:py-2 file:px-4
      file:rounded-full file:border-0
      file:text-sm file:font-semibold
      file:bg-violet-50 file:text-violet-700
      hover:file:bg-violet-100
    "/>
  </label>
</form>

Tailwind의 테두리 초기화는 파일 입력 버튼에 적용되지 않습니다. 따라서 파일 입력 버튼에 테두리를 추가하려면 테두리 스타일을 file:border-solid과 같은 클래스로 명시적으로 설정해야 하며, 테두리 너비 유틸리티도 함께 사용해야 합니다:

<input type="file" class="file:border file:border-solid ..." />

​리스트 마커 스타일링

marker 수식어를 사용하여 리스트의 숫자나 불릿을 스타일링할 수 있습니다:

<ul role="list" class="marker:text-sky-400 list-disc pl-5 space-y-3 text-slate-500">
  <li>다진 표고버섯 5컵</li>
  <li>올리브 오일 1/2컵</li>
  <li>셀러리 3파운드</li>
</ul><ul role="list" class="marker:text-sky-400 list-disc pl-5 space-y-3 text-slate-400">
  <li>다진 표고버섯 5컵</li>
  <li>올리브 오일 1/2컵</li>
  <li>셀러리 3파운드</li>
</ul>

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

​강조된 텍스트

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 수정자를 사용하여 첫 글자를 스타일링할 수 있습니다:

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

​Dialog backdrops

native <dialog> 엘리먼트의 배경을 스타일링하려면 backdrop 수정자를 사용하세요:

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

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

​Media and feature queries

​반응형 브레이크포인트

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

예를 들어, 아래 코드는 모바일에서는 3열 그리드, 중간 크기 화면에서는 4열 그리드, 큰 화면에서는 6열 그리드로 렌더링됩니다:

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

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

​Prefers color scheme

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

라이트 모드를 대상으로 할 때는 수정자 없이 유틸리티를 사용하고, 다크 모드에 대한 오버라이드를 제공하려면 dark 수정자를 사용하세요:

<div class="bg-white dark:bg-slate-900 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl">
  <div>
    <span class="inline-flex items-center justify-center p-2 bg-indigo-500 rounded-md shadow-lg">
      <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><!-- ... --></svg>
    </span>
  </div>
  <h3 class="text-slate-900 dark:text-white mt-5 text-base font-medium tracking-tight">거꾸로 쓰기</h3>
  <p class="text-slate-500 dark:text-slate-400 mt-2 text-sm">
    제로 그래비티 펜은 거꾸로를 포함한 모든 방향에서 사용할 수 있습니다. 심지어 우주에서도 작동합니다.
  </p>
</div>

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

​Prefers reduced motion

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

사용자가 애니메이션을 줄이도록 요청한 경우, motion-reduce 수식어를 사용해 조건부로 스타일을 추가할 수 있습니다:

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

Tailwind는 또한 사용자가 애니메이션을 줄이도록 요청하지 않은 경우에만 스타일을 추가하는 motion-safe 수식어를 제공합니다. 이는 motion-reduce 헬퍼를 사용할 때 많은 스타일을 “되돌려야” 하는 상황에서 유용합니다:

<!-- `motion-reduce`를 사용하면 많은 스타일을 "되돌려야" 할 수 있습니다 -->
<button class="hover:-translate-y-0.5 transition motion-reduce:hover:translate-y-0 motion-reduce:transition-none ...">
  변경 사항 저장
</button>

<!-- 이런 상황에서는 `motion-safe`를 사용하는 것이 코드가 더 적습니다 -->
<button class="motion-safe:hover:-translate-x-0.5 motion-safe:transition ...">
  변경 사항 저장
</button>

​prefers-contrast

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

contrast-more 수식어를 사용하면 사용자가 더 높은 대비를 요청했을 때 스타일을 조건부로 추가할 수 있습니다:

<form>
  <label class="block">
    <span class="block text-sm font-medium text-slate-700">주민등록번호</span>
    <input class="border-slate-200 placeholder-slate-400 contrast-more:border-slate-400 contrast-more:placeholder-slate-500"/>
    <p class="mt-2 opacity-10 contrast-more:opacity-100 text-slate-600 text-sm">
      이 정보는 여러분의 신원을 도용하기 위해 필요합니다.
    </p>
  </label>
</form>

Tailwind는 또한 사용자가 더 낮은 대비를 요청했을 때 스타일을 조건부로 추가할 수 있는 contrast-less 수식어도 제공합니다.

​강제 색상 모드

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

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

<form>
  <legend> 테마 선택: </legend>
  <label>
    <input type="radio" class="forced-colors:appearance-auto appearance-none" />
    <p class="forced-colors:block hidden">
      Cyan
    </p>
    <div class="forced-colors:hidden h-6 w-6 rounded-full bg-cyan-200 ..."></div>
    <div class="forced-colors:hidden h-6 w-6 rounded-full bg-cyan-500 ..."></div>
  </label>
  <!-- ... -->
</form>

Tailwind는 강제 색상 조정을 위한 forced color adjust 유틸리티도 제공합니다. 이를 통해 강제 색상 모드를 선택적으로 적용하거나 제외할 수 있습니다.

​뷰포트 방향

뷰포트가 특정 방향일 때 스타일을 조건부로 추가하려면 portrait와 landscape 수정자를 사용하세요:

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

​인쇄용 스타일

문서가 인쇄될 때만 적용되는 스타일을 조건부로 추가하려면 print 수정자를 사용하세요:

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

​지원 규칙

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>

프로젝트에서 자주 사용하는 @supports 규칙에 대한 단축키를 tailwind.config.js 파일의 theme.supports 섹션에서 설정할 수 있습니다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    supports: {
      grid: 'display: grid',
    },
  },
}

이제 프로젝트에서 이러한 커스텀 supports-* 수식어를 사용할 수 있습니다.

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

​Attribute selectors

​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>

기본적으로 가장 일반적인 boolean ARIA 속성에 대한 수정자를 포함하고 있습니다:

tailwind.config.js 파일에서 theme.aria 또는 theme.extend.aria를 수정하여 사용할 aria-* 수정자를 커스터마이징할 수 있습니다:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      aria: {
        asc: 'sort="ascending"',
        desc: '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-* 수정자를 사용하세요.

정의상 표준 data-* 속성은 없기 때문에, 기본적으로는 임의의 값을 바로 지원합니다. 예를 들어:

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

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

프로젝트에서 자주 사용하는 데이터 속성 선택자에 대한 단축키를 tailwind.config.js 파일의 theme.data 섹션에서 설정할 수 있습니다:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    data: {
      checked: 'ui~="checked"',
    },
  },
}

그런 다음 프로젝트에서 이 커스텀 data-* 수정자를 사용할 수 있습니다:

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

​RTL 지원

다국어 레이아웃을 구축할 때 rtl 및 ltr 수정자를 사용하여 각각 오른쪽에서 왼쪽(rtl) 및 왼쪽에서 오른쪽(ltr) 모드에서 스타일을 조건부로 추가할 수 있습니다:

왼쪽에서 오른쪽

Tom Cook

Director of Operations

오른쪽에서 왼쪽

تامر كرم

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

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

ltr 수정자는 dir 속성이 명시적으로 ltr로 설정되지 않은 경우 효과가 없습니다. 따라서 다국어 사이트를 구축할 때는 rtl 모드뿐만 아니라 항상 방향을 설정해야 합니다.

<html dir="ltr">
  <!-- ... -->
</html>

이 수정자는 왼쪽에서 오른쪽과 오른쪽에서 왼쪽 레이아웃을 모두 지원해야 하는 사이트를 구축할 때만 유용합니다. 단일 방향만 지원하는 사이트를 구축하는 경우 이 수정자가 필요하지 않습니다. 콘텐츠에 적합한 스타일을 적용하면 됩니다.

​열림/닫힘 상태

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

<div class="max-w-lg mx-auto p-8">
  <details class="open:bg-white dark:open:bg-slate-900 open:ring-1 open:ring-black/5 dark:open:ring-white/10 open:shadow-lg p-6 rounded-lg" open>
    <summary class="text-sm leading-6 text-slate-900 dark:text-white font-semibold select-none">
      왜 오벌틴이라고 부를까요?
    </summary>
    <div class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-400">
      <p>머그잔은 둥글고, 병도 둥글잖아요. 라운드틴이라고 불러야 할 것 같아요.</p>
    </div>
  </details>
</div>

​Custom modifiers

​임의 변형 사용하기

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

임의 변형은 선택자를 나타내는 형식 문자열로, 대괄호로 감싸져 있습니다. 예를 들어, 이 임의 수정자는 요소가 세 번째 자식일 때만 선택합니다:

<ul role="list">
  {#each items as item}
    <li class="[&:nth-child(3)]:underline">{item}</li>
  {/each}
</ul>

이 형식 문자열은 addVariant 플러그인 API에서 사용하는 것과 동일하며, &는 수정되는 선택자를 나타냅니다.

임의 변형은 내장된 수정자나 다른 임의 변형과 함께 사용할 수 있습니다. 이는 Tailwind의 다른 수정자와 마찬가지입니다:

<ul role="list">
  {#each items as item}
    <li class="lg:[&:nth-child(3)]:hover:underline">{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 커스텀 수정자에서는 & 플레이스홀더가 필요하지 않습니다. 이는 전처리기에서 중첩할 때와 동일합니다.

at-rule과 일반 선택자 수정자를 결합할 수도 있습니다. at-rule 뒤에 중괄호 안에 선택자 수정자를 포함하면 됩니다:

<button type="button" class="[@media(any-hover:hover){&:hover}]:opacity-100">
  <!-- ... -->
</button>

​플러그인 만들기

프로젝트에서 동일한 임의의 수정자를 여러 번 사용한다면, addVariant API를 사용해 플러그인으로 추출하는 것이 좋습니다:

let plugin = require('tailwindcss/plugin')

module.exports = {
  // ...
  plugins: [
    plugin(function ({ addVariant }) {
      // `third` 변형을 추가합니다. 예: `third:pb-0`
      addVariant('third', '&:nth-child(3)')
    })
  ]
}

자세한 내용은 변형 플러그인 추가 문서를 참고하세요.

​Advanced topics

​커스텀 클래스와 함께 사용하기

Tailwind의 모든 수식어(modifier)는 여러분이 Tailwind의 레이어 중 하나에 정의하거나 플러그인을 통해 추가한 커스텀 클래스와 함께 사용할 수 있습니다.

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

@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
}

<div class="lg:content-auto">
  <!-- ... -->
</div>

​스택된 수식어 순서 지정하기

수식어를 스택할 때는 중첩된 함수 호출처럼 안쪽에서 바깥쪽으로 적용됩니다:

// 이 수식어들은:
'dark:group-hover:focus:opacity-100'

// 다음과 같이 적용됩니다:
dark(groupHover(focus('opacity-100')))

대부분의 경우 이 순서는 크게 중요하지 않지만, 몇 가지 상황에서는 순서에 따라 의미 있는 차이가 발생할 수 있습니다.

예를 들어, darkMode가 class로 설정된 경우, dark와 group-hover 수식어를 결합할 때 순서에 따라 다른 결과가 생성됩니다:

/* dark:group-hover:opacity-100 */
.dark .group:hover .dark\:group-hover\:opacity-100 {
  opacity: 1;
}

/* group-hover:dark:opacity-100 */
.group:hover .dark .group-hover\:dark\:opacity-100 {
  opacity: 1;
}

첫 번째 예제에서는 dark 엘리먼트가 group 엘리먼트의 부모여야 하지만, 두 번째 예제에서는 그 반대입니다.

또 다른 중요한 경우는 공식 typography 플러그인에 포함된 prose-headings와 같은 수식어를 사용할 때입니다:

/* prose-headings:hover:underline */
.prose-headings\:hover\:underline:hover :is(:where(h1, h2, h3, h4, th)) {
  text-decoration: underline;
}

/* hover:prose-headings:underline */
.hover\:prose-headings\:underline :is(:where(h1, h2, h3, h4, th)):hover {
  text-decoration: underline;
}

첫 번째 예제에서는 아티클 자체에 마우스를 올리면 모든 제목에 밑줄이 생기지만, 두 번째 예제에서는 각 제목에 마우스를 올렸을 때만 해당 제목에 밑줄이 생깁니다.

​Appendix

​빠른 참조

Tailwind에 기본으로 포함된 모든 수정자(modifier)에 대한 빠른 참조 표입니다.

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

이 문서는 Tailwind에 포함된 모든 의사 클래스 수정자에 대한 예제를 종합적으로 정리한 목록입니다. 이 가이드의 시작 부분에 있는 의사 클래스 문서를 보완하기 위해 작성되었습니다.

​hover (:hover)

마우스 커서를 요소 위에 올렸을 때 스타일을 적용하려면 hover 수정자를 사용하세요:

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

​focus (:focus)

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

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

​focus-within (:focus-within)

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

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

​focus-visible (:focus-visible)

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

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

​active (: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 (:target)

target 수식어를 사용하여 현재 URL의 프래그먼트와 일치하는 ID를 가진 엘리먼트에 스타일을 적용할 수 있습니다:

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

​first (:first-child)

first 수식어를 사용하여 첫 번째 자식 엘리먼트에 스타일을 적용할 수 있습니다:

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

​last (:last-child)

last 수식어를 사용하여 마지막 자식 엘리먼트에 스타일을 적용할 수 있습니다:

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

​only (:only-child)

only 수식어를 사용해 엘리먼트가 유일한 자식일 때 스타일을 적용할 수 있습니다:

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

​odd (:nth-child(odd))

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

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

​even (: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)

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)

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)

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>

​empty (: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)

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

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

​checked (:checked)

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

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

​indeterminate (:indeterminate)

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

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

​default (:default)

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

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

​required (:required)

required 수식어를 사용하여 필수 입력 필드에 스타일을 적용합니다:

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

​valid (:valid)

valid 수식어를 사용하여 입력이 유효할 때 스타일을 적용할 수 있습니다:

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

​invalid (:invalid)

invalid 수정자를 사용하여 입력값이 유효하지 않을 때 스타일을 적용할 수 있습니다:

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

​in-range (:in-range)

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

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

​out-of-range (:out-of-range)

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

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

​placeholder-shown (: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 ..." />