处理悬停、聚焦和其他状态

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 几乎涵盖了您需要的一切修饰符，其中包括：

• Pseudo-classes，例如 :hover、:focus、:first-child 和 :required
• Pseudo-elements，例如 ::before、::after、::placeholder 和 ::selection
• Media and feature queries，例如响应式断点、暗黑模式和 prefers-reduced-motion
• Attribute selectors，例如 [dir="rtl"] 和 [open]

这些修饰符甚至可以是 stacked，以针对更具体的情况，例如在暗模式下、在中等断点处、在悬停时更改背景颜色：

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

在本指南中，您将了解框架中可用的每个修饰符，如何将它们与您自己的自定义类一起使用，甚至如何创建自己的修饰符。

​伪类

​悬停、聚焦和活动

使用 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 等。

请参阅 pseudo-class reference 以获取可用的伪类修饰符的完整列表。

​首位、末位、奇数和偶数

当元素是第一个子元素或最后一个子元素时，使用 first 和 last 修饰符来设置元素的样式：

<ul role="list" class="p-6 divide-y divide-slate-200">
  {#each people as person}
    <!-- Remove top/bottom padding when first/last child -->
    <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}
      <!-- Use a white background for odd rows, and slate-50 for even rows -->
      <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 等。

请参阅 pseudo-class reference 以获取可用的伪类修饰符的完整列表。

​表格状态

使用修饰符（如 required、invalid 和 disabled）为不同状态下的表单元素设置样式：

<form>
  <label class="block">
    <span class="block text-sm font-medium text-slate-700">Username</span>
    <!-- Using form state modifiers, the classes can be identical for every input -->
    <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 等。

请参阅 pseudo-class reference 以获取可用的伪类修饰符的完整列表。

​根据父级状态进行样式设置 (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">New project</h3>
  </div>
  <p class="text-slate-500 group-hover:text-white text-sm">Create a new project from a variety of starting templates.</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。

​任意组

您可以通过在方括号之间提供 arbitrary value 作为自己的选择器来动态创建一次性 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">
      Please provide a valid email address.
    </p>
  </label>
</form>

这使得实现各种巧妙的技巧成为可能，例如无需任何 JS 即可实现 floating labels。

此模式适用于每个伪类修饰符，例如 peer-focus、peer-required 和 peer-disabled。

值得注意的是，由于 subsequent-sibling combinator 在 CSS 中的工作方式，peer 标记只能用于_上一个_兄弟元素。

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

​任意对等点

您可以通过在方括号之间提供 arbitrary value 作为自己的选择器来动态创建一次性 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>

​伪元素

​前后对比

使用 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="[email protected]" />
</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 元素通常更简单。

例如，这里是与上面相同的设计，但使用 <span> 而不是 ::before 伪元素，这更容易阅读，实际上代码也更少：

<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 base styles，则内容属性将不会默认设置为空字符串，并且您需要在使用 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 修饰符来设置文件输入中的按钮样式：

Choose profile photo

<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">Choose profile photo</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 的 border reset 不适用于文件输入按钮。这意味着要为文件输入按钮添加边框，您需要使用 file:border-solid 之类的类以及任何 border-width 实用程序明确设置 border-style：

<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 cups chopped Porcini mushrooms</li>
  <li>1/2 cup of olive oil</li>
  <li>3lb of celery</li>
</ul><ul role="list" class="marker:text-sky-400 list-disc pl-5 space-y-3 text-slate-400">
  <li>5 cups chopped Porcini mushrooms</li>
  <li>1/2 cup of olive oil</li>
  <li>3lb of celery</li>
</ul>

我们将 marker 修饰符设计为可继承的，因此虽然您可以在 <li> 元素上直接使用它，但您也可以在父级上使用它，以避免重复。

​突出显示的文本

使用 selection 修饰符来设置活动文本选择的样式：

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

我们将 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>

​对话框背景

使用 backdrop 修饰符设置 native <dialog> element 的背景样式：

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

如果您在项目中使用原生 <dialog> 元素，您可能还想了解使用 open 修饰符的 styling open/closed states。

​媒体和功能查询

​响应式断点

要在特定断点处设置元素样式，请使用响应修饰符，如 md 和 lg。

例如，这将在移动设备上呈现 3 列网格，在中等宽度屏幕上呈现 4 列网格，在大宽度屏幕上呈现 6 列网格：

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

查看 Responsive Design 文档以深入了解这些功能的工作原理。

​喜欢配色方案

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">Writes Upside-Down</h3>
  <p class="text-slate-500 dark:text-slate-400 mt-2 text-sm">
    The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
  </p>
</div>

查看 Dark Mode 文档以深入了解此功能的工作原理。

​倾向于减少运动

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>
  Processing...
</button>

Tailwind 还包含一个 motion-safe 修饰符，仅当用户未请求减少运动时才添加样式。当使用 motion-reduce 辅助程序意味着必须撤消许多样式时，此功能非常有用：

<!-- Using `motion-reduce` can mean lots of "undoing" styles -->
<button class="hover:-translate-y-0.5 transition motion-reduce:hover:translate-y-0 motion-reduce:transition-none ...">
  Save changes
</button>

<!-- Using `motion-safe` is less code in these situations -->
<button class="motion-safe:hover:-translate-x-0.5 motion-safe:transition ...">
  Save changes
</button>

​偏好对比

prefers-contrast 媒体查询会告诉您用户是否要求增加或减少对比度。

当用户要求更多对比度时，使用 contrast-more 修饰符有条件地添加样式：

<form>
  <label class="block">
    <span class="block text-sm font-medium text-slate-700">Social Security Number</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">
      We need this to steal your identity.
    </p>
  </label>
</form>

Tailwind 还包含一个 contrast-less 修饰符，当用户要求较少对比度时，您可以使用它有条件地添加样式。

​强制颜色模式

forced-colors 媒体查询指示用户是否使用强制颜色模式。这些模式会使用用户定义的文本、背景、链接和按钮调色板覆盖您网站的颜色。

当用户启用强制颜色模式时，使用 forced-colors 修饰符有条件地添加样式：

<form>
  <legend> Choose a theme: </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>
      This experience is designed to be viewed in landscape. Please rotate your
      device to view the site.
    </p>
  </div>
</div>

​打印样式

使用 print 修饰符有条件地添加仅在打印文档时适用的样式：

<div>
  <article class="print:hidden">
    <h1>My Secret Pizza Recipe</h1>
    <p>This recipe is a secret, and must not be shared with anyone</p>
    <!-- ... -->
  </article>
  <div class="hidden print:block">
    Are you seriously trying to print this? It's secret!
  </div>
</div>

​支持规则

使用 supports-[...] 修饰符根据用户浏览器是否支持某项功能来设置样式。

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

在底层，supports-[...] 修饰符生成 @supports rules 并接受方括号之间与 @supports (...) 一起使用的任何内容，如属性/值对，甚至使用 and 和 or 的表达式。

为了简洁起见，如果您只需要检查某个属性是否受支持（而不是特定值），那么您只需指定属性名称即可：

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

您可以在 tailwind.config.js 文件的 theme.supports 部分中配置项目中使用的常见 @supports 规则的快捷方式：

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

然后您可以在项目中使用这些自定义 supports-* 修饰符：

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

​属性选择器

​ARIA 状态

使用 aria-* 修饰符可以根据 ARIA attributes 有条件地设置样式。

例如，当 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 属性的修饰符：

您可以通过编辑 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 attributes 有条件地应用样式。

由于定义上没有标准的 data-* 属性，因此默认情况下我们仅支持开箱即用的任意值，例如：

<!-- Will apply -->
<div data-size="large" class="data-[size=large]:p-8">
  <!-- ... -->
</div>

<!-- Will not apply -->
<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 修饰符分别有条件地以从右到左和从左到右模式添加样式：

Left-to-right

Tom Cook

Director of Operations

Right-to-left

تامر كرم

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

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

请注意，除非将 dir 属性明确设置为 ltr，否则 ltr 修饰符不会生效，因此如果您正在构建多方向站点，请确保始终设置方向，而不仅仅是在 rtl 模式下。

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

请记住，这些修饰符仅在您构建的网站需要同时支持从左到右和从右到左布局时才有用。如果您构建的网站只需要支持一个方向，则不需要这些修饰符 - 只需应用适合您的内容的样式即可。

​打开/关闭状态

使用 open 修饰符可以在 <details> 或 <dialog> 元素处于打开状态时有条件地添加样式：

<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">
      Why do they call it Ovaltine?
    </summary>
    <div class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-400">
      <p>The mug is round. The jar is round. They should call it Roundtine.</p>
    </div>
  </details>
</div>

​自定义修饰符

​使用任意变体

就像 arbitrary values 允许您在实用程序类中使用自定义值一样，任意变体允许您直接在 HTML 中编写自定义选择器修饰符。

任意变体只是表示选择器的格式字符串，括在方括号中。例如，这个任意修饰符仅当元素是第三个子元素时才选择该元素：

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

格式字符串与 addVariant plugin 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 自定义修饰符时，& 占位符不是必需的，就像使用预处理器嵌套时一样。

您甚至可以将 @ 规则和常规选择器修饰符结合起来，方法是在 @ 规则后的花括号内包含选择器修饰符：

<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 }) {
      // Add a `third` variant, ie. `third:pb-0`
      addVariant('third', '&:nth-child(3)')
    })
  ]
}

在 adding variant plugins 文档中了解更多信息。

​高级主题

​与您自己的课程一起使用

所有 Tailwind 的修饰符都可以与您自己的自定义类一起使用，只要您在 Tailwind 的 layers 之一中定义它们或使用 plugin 添加它们即可：

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

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

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

​排序堆叠修饰符

堆叠修饰符时，它们是从内到外应用的，就像嵌套函数调用一样：

// These modifiers:
'dark:group-hover:focus:opacity-100'

// ...are applied like this:
dark(groupHover(focus('opacity-100')))

大多数情况下这实际上并不重要，但在某些情况下，您使用的顺序实际上会生成有意义的不同 CSS。

例如，如果您将 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 元素的父元素，但在第二个例子中则相反。

另一个重要的地方是使用官方排版插件中包含的修饰符（如 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;
}

在第一个例子中，当您将鼠标悬停在文章本身上时，每个标题都会出现下划线，而在第二个例子中，仅当您将鼠标悬停在某个标题上时，每个标题才会出现下划线。

​附录

​快速参考

Tailwind 默认包含的每个单个修饰符的快速参考表。

​伪类引用

这是 Tailwind 中包含的所有伪类修饰符的完整示例列表，以补充本指南开头的 pseudo-classes documentation。

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

当元素或其后代之一获得焦点时，使用 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)

当链接已经被访问时，使用 visited 修饰符设置链接的样式：

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

​target (:target)

如果元素的 ID 与当前 URL 片段匹配，则使用 target 修饰符为元素设置样式：

<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="[email protected]" />

​autofill (:autofill)

当浏览器使用 autofill 修饰符自动填充输入内容时，设置其样式：

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

​read-only (:read-only)

当输入为只读时，使用 read-only 修饰符设置输入的样式：

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