호버, 포커스 및 기타 상태 다루기

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

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

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

<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="w-10 h-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 truncate text-slate-500">{person.email}</p>
      </div>
    </li>
  {/each}
</ul>

<table>
  <!-- ... -->
  <tbody>
    {#each people as person}
      <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>

<form>
  <label class="block">
    <span class="block text-sm font-medium text-slate-700">Username</span>
    <!-- 폼 상태 수정자를 사용하면, 모든 입력에 대해 클래스를 동일하게 사용할 수 있습니다 -->
    <input type="text" value="tbone" disabled class="block w-full px-3 py-2 mt-1 text-sm bg-white border rounded-md shadow-sm border-slate-300 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>

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

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

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

.group.is-published .group-\[\.is-published\]\:block {
  display: block;
}

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

:nth-of-type(3) .group .group-\[\:nth-of-type\(3\)_\&\]\:block {
  display: block;
}

<form>
  <label class="block">
    <span class="block text-sm font-medium text-slate-700">Email</span>
    <input type="email" class="peer ..."/>
    <p class="invisible mt-2 text-sm text-pink-600 peer-invalid:visible">
      Please provide a valid email address.
    </p>
  </label>
</form>

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

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

<form>
  <label for="email">이메일:</label>
  <input id="email" name="email" type="email" class="is-dirty peer" required />
  <div class="peer-[.is-dirty]:peer-required:block hidden">이 필드는 필수입니다.</div>
  <!-- ... -->
</form>

.peer.is-dirty:required ~ .peer-\[\.is-dirty\]\:peer-required\:block {
  display: block;
}

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

:nth-of-type(3) .peer ~ .peer-\[\:nth-of-type\(3\)_\&\]\:block {
  display: block;
}

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

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

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

<fieldset>
  <legend>오늘</legend>

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

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

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

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

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

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

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

<form class="flex items-center space-x-6">
  <div class="shrink-0">
    <img class="object-cover w-16 h-16 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>

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

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

<div class="selection:bg-fuchsia-300 selection:text-fuchsia-900">
  <p>
    So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist.
  </p>
</div>

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

<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"
 dark-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 class="backdrop:bg-gray-50">
  <form method="dialog">
    <!-- ... -->
  </form>
</dialog>

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

<div class="px-6 py-8 bg-white rounded-lg shadow-xl dark:bg-slate-900 ring-1 ring-slate-900/5">
  <div>
    <span class="inline-flex items-center justify-center p-2 bg-indigo-500 rounded-md shadow-lg">
      <svg class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><!-- ... --></svg>
    </span>
  </div>
  <h3 class="mt-5 text-base font-medium tracking-tight text-slate-900 dark:text-white">뒤집혀서 쓸 수 있음</h3>
  <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
    제로 중력 펜은 어떤 방향으로도 쓸 수 있으며, 심지어 우주 공간에서도 작동합니다.
  </p>
</div>

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

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

<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 text-sm opacity-10 contrast-more:opacity-100 text-slate-600">
      이 정보는 귀하의 신원을 도용하기 위해 필요합니다.
    </p>
  </label>
</form>

<form>
  <legend> 테마 선택: </legend>
  <label>
    <input type="radio" class="appearance-none forced-colors:appearance-auto" />
    <p class="hidden forced-colors:block">
      시안
    </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>

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

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

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

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

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

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

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

module.exports = {
  theme: {
    extend: {
      aria: {
        asc: 'sort="ascending"',
        desc: 'sort="descending"',
      },
    },
  },
};

<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-[sort=ascending]:bg-[url('/img/down-arrow.svg')][aria-sort=ascending] {
  background-image: url('/img/down-arrow.svg');
}

.aria-[sort=descending]:bg-[url('/img/up-arrow.svg')][aria-sort=descending] {
  background-image: url('/img/up-arrow.svg');
}

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

.group[aria-sort=ascending] .group-aria-[sort=ascending]:rotate-0 {
  --tw-rotate: 0deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group[aria-sort=descending] .group-aria-[sort=descending]:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

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

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

module.exports = {
  theme: {
    data: {
      checked: 'ui~="checked"',
    },
  },
}

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

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

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

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

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

.[&:nth-child(3)]:underline:nth-child(3) {
  text-decoration-style: underline
}

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

@media (min-width: 1024px) {
  .lg:[&:nth-child(3)]:hover:underline:hover:nth-child(3) {
    text-decoration-line: underline;
  }
}

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

.[&_p]:mt-4 p {
    margin-top: 1rem;
}

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

@supports (display: grid) {
  .[@supports(display:grid)]:grid {
    display: grid;
  }
}

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

@media (any-hover: hover) {
  .[@media(any-hover:hover){&:hover}]:opacity-100:hover {
    opacity: 1
  }
}

let plugin = require('tailwindcss/plugin')

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

@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')))

/* 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;
}

/* 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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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