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

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>

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

​伪类

​悬停、聚焦和激活

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

请参阅伪类参考，以获取可用伪类修饰符的完整列表。

​表单状态

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

请参阅 伪类参考，以获取可用伪类修饰符的完整列表。

​基于父级状态的样式 (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。

​任意组

您可以通过在方括号中提供自己的选择器作为任意值，动态地创建一次性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>

​基于兄弟状态的样式 (同级-{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。

此模式适用于所有伪类修饰符，例如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

产品设计师，就职于 planeteria.tech

Casey Jordan

很高兴来到这里。

Alex Reed

多学科设计师，在艺术和科技的交汇处工作。
alex-reed.com

Taylor Bailey

像素推手，div 操纵者。

<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 中且用户无法选择的情况下。

请注意，如果您禁用了我们的预先配置的基本样式，则内容属性默认情况下不会设置为空字符串，您需要在使用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">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 的 边框重置 不应用于文件输入按钮。这意味着要为文件输入按钮添加边框，您需要使用类似 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 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` 修饰符来设置 原生 `<dialog>` 元素 的背景样式

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

查看 响应式设计 文档，深入了解这些功能的工作原理。

​首选颜色方案

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>

查看 深色模式 文档，深入了解此功能的工作原理。

​首选减少运动

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 还包括 强制颜色调整 实用程序，用于选择加入或退出强制颜色。

​视窗方向

使用 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 规则，并在方括号之间接受您在 @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 属性 有条件地设置样式。

例如，要将 bg-sky-700 类应用于 aria-checked 属性设置为 true 的情况，请使用 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-* 属性，因此我们只支持开箱即用的任意值，例如

<!-- 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` 修饰符分别在构建多方向布局时有条件地添加从右到左和从左到右模式的样式。

从左到右

汤姆·库克

运营总监

从右到左

تامر كرم

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

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

​自定义修饰符

​使用任意变体

就像任意值 允许您在实用程序类中使用自定义值一样，任意变体允许您直接在 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 规则

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

使用 at 规则自定义修饰符时，& 占位符是不必要的，就像使用预处理器嵌套时一样。

您甚至可以通过在 at 规则后用大括号括起选择器修饰符来组合 at 规则和常规选择器修饰符

<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)')
    })
  ]
}

在 添加变体插件 文档中了解更多信息。

​高级主题

​与您自己的类一起使用

只要您在 Tailwind 的 层 中定义了它们，或者使用 插件 添加了它们，就可以使用您自己的自定义类使用所有 Tailwind 的修饰符。

@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 中所有伪类修饰符的示例的综合列表，作为本指南开头部分的 伪类文档 的补充。

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

使用 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` 修饰符为选中的复选框或单选按钮设置样式。

<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:ring-2 ..." />

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

使用 `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` 修饰符为只读输入设置样式

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