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

Tailwind 中的每个工具类都可以有条件地应用，方法是在类名的开头添加一个修饰符来描述你要定位的条件。

¥Every utility class in Tailwind can be applied conditionally by adding a modifier to the beginning of the class name that describes the condition you want to target.

例如，要在悬停时应用 bg-sky-700 类，请使用 hover:bg-sky-700 类：

¥For example, to apply the bg-sky-700 class on hover, use the hover:bg-sky-700 class:

<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 包含几乎所有你需要的修饰符，包括：

¥Tailwind includes modifiers for just about everything you’ll ever need, including:

• 伪类，如 :hover、:focus、:first-child 和 :required

  ¥Pseudo-classes, like :hover, :focus, :first-child, and :required

• 伪元素，如 ::before、::after、::placeholder 和 ::selection

  ¥Pseudo-elements, like ::before, ::after, ::placeholder, and ::selection

• 媒体和特性查询，喜欢响应式断点，夜间模式，还有 prefers-reduced-motion

  ¥Media and feature queries, like responsive breakpoints, dark mode, and prefers-reduced-motion

• 属性选择器，像 [dir="rtl"] 和 [open]

  ¥Attribute selectors, like [dir="rtl"] and [open]

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

¥These modifiers can even be stacked to target more specific situations, for example changing the background color in dark mode, at the medium breakpoint, on hover:

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

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

¥In this guide you’ll learn about every modifier available in the framework, how to use them with your own custom classes, and even how to create your own.

​伪类

¥Pseudo-classes

​悬停、聚焦、以及激活

¥Hover, focus, and active

使用 hover、focus 和 active 修饰符在悬停、聚焦和活动元素上设置样式：

¥Style elements on hover, focus, and active using the hover, focus, and active modifiers:

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

¥Tailwind also includes modifiers for other interactive states like :visited, :focus-within, :focus-visible, and more.

有关可用伪类修饰符的完整列表，请参阅 伪类参考。

¥See the pseudo-class reference for a complete list of available pseudo-class modifiers.

​最先、最后、奇数和偶数

¥First, last, odd, and even

使用 first 和 last 修饰符为元素设置第一个或最后一个子元素的样式：

¥Style an element when it is the first-child or last-child using the first and last modifiers:

<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 修饰符为奇数或偶数子元素设置样式：

¥You can also style an element when it’s an odd or even child using the odd and even modifiers:

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

¥Tailwind also includes modifiers for other structural pseudo-classes like :only-child, :first-of-type, :empty, and more.

有关可用伪类修饰符的完整列表，请参阅 伪类参考。

¥See the pseudo-class reference for a complete list of available pseudo-class modifiers.

​表单状态

¥Form states

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

¥Style form elements in different states using modifiers like required, invalid, and 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>

对这类事情使用修饰符可以减少模板中条件逻辑的数量，让你可以使用同一组类而不管输入处于什么状态，并让浏览器为你应用正确的样式。

¥Using modifiers for this sort of thing can reduce the amount of conditional logic in your templates, letting you use the same set of classes regardless of what state an input is in and letting the browser apply the right styles for you.

Tailwind 还包括其他形式状态的修饰符，如 :read-only、:indeterminate、:checked 等。

¥Tailwind also includes modifiers for other form states like :read-only, :indeterminate, :checked, and more.

有关可用伪类修饰符的完整列表，请参阅 伪类参考。

¥See the pseudo-class reference for a complete list of available pseudo-class modifiers.

​基于父状态的样式 (group-{modifier})

¥Styling based on parent state (group-{modifier})

当你需要根据某个父元素的状态来设置元素的样式时，用 group 类标记父元素，并使用 group-hover 等 group-* 修饰符来设置目标元素的样式：

¥When you need to style an element based on the state of some parent element, mark the parent with the group class, and use group-* modifiers like group-hover to style the target element:

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

¥This pattern works with every pseudo-class modifier, for example group-focus, group-active, or even group-odd.

​区分嵌套组

¥Differentiating nested groups

嵌套组时，你可以根据特定父组的状态设置样式，方法是使用 group/{name} 类为该父组指定一个唯一的组名称，并使用 group-hover/{name} 类在修饰符中包含该名称：

¥When nesting groups, you can style something based on the state of a specific parent group by giving that parent a unique group name using a group/{name} class, and including that name in modifiers using classes like 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。

¥Groups can be named however you like and don’t need to be configured in any way — just name your groups directly in your markup and Tailwind will automatically generate the necessary CSS.

​任意组

¥Arbitrary groups

你可以通过在方括号之间提供你自己的选择器作为 任意值 来即时创建一次性 group-* 修饰符：

¥You can create one-off group-* modifiers on the fly by providing your own selector as an arbitrary value between square brackets:

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

为了获得更多控制，你可以使用 & 字符来标记 .group 在最终选择器中相对于你传入的选择器的位置：

¥For more control, you can use the & character to mark where .group should end up in the final selector relative to the selector you are passing in:

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

​基于兄弟状态的样式 (peer-{modifier})

¥Styling based on sibling state (peer-{modifier})

当你需要根据同级元素的状态设置元素样式时，请使用 peer 类标记同级元素，并使用 peer-invalid 等 peer-* 修饰符来设置目标元素的样式：

¥When you need to style an element based on the state of a sibling element, mark the sibling with the peer class, and use peer-* modifiers like peer-invalid to style the target element:

<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 的 浮动标签。

¥This makes it possible to do all sorts of neat tricks, like floating labels for example without any JS.

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

¥This pattern works with every pseudo-class modifier, for example peer-focus, peer-required, and peer-disabled.

请务必注意，由于 后续兄弟组合器 在 CSS 中的工作方式，peer 标记只能用于之前的兄弟姐妹。

¥It’s important to note that the peer marker can only be used on previous siblings because of how the subsequent-sibling combinator works in CSS.

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

​区分同行

¥Differentiating peers

使用多个节点时，你可以通过使用 peer/{name} 类为该节点赋予唯一名称，并使用 peer-checked/{name} 等类将该名称包含在修饰符中，从而根据特定节点的状态设置样式：

¥When using multiple peers, you can style something on the state of a specific peer by giving that peer a unique name using a peer/{name} class, and including that name in modifiers using classes like 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。

¥Peers can be named however you like and don’t need to be configured in any way — just name your peers directly in your markup and Tailwind will automatically generate the necessary CSS.

​任意同行

¥Arbitrary peers

你可以通过在方括号之间提供你自己的选择器作为 任意值 来即时创建一次性 peer-* 修饰符：

¥You can create one-off peer-* modifiers on the fly by providing your own selector as an arbitrary value between square brackets:

<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 在最终选择器中相对于你传入的选择器的位置：

¥For more control, you can use the & character to mark where .peer should end up in the final selector relative to the selector you are passing in:

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

​直接子级的样式 (*-{modifier})

¥Styling direct children (*-{modifier})

虽然通常最好将工具类直接放在子元素上，但在需要为你无法控制的直接子元素设置样式的情况下，可以使用 * 修饰符。

¥While it’s generally preferable to put utility classes directly on child elements, you can use the * modifier in situations where you need to style direct children that you don’t have control over.

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

需要注意的是，由于生成的子选择器的特殊性，直接在子选择器本身上使用工具覆盖样式将不起作用。

¥It’s important to note that overriding a style with a utility directly on the child itself won’t work due to the specificity of the generated child selector.

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

​基于后代的样式 (has-{modifier})

¥Styling based on descendants (has-{modifier})

使用 has-* 修饰符根据其后代的状态或内容设置元素的样式。

¥Use the has-* modifier to style an element based on the state or content of its descendants.

<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]）根据其后代的内容设置元素的样式。

¥You can use has-* with a pseudo-class, like has-[:focus], to style an element based on the state of its descendants. You can also use element selectors, like has-[img] or has-[a], to style an element based on the content of its descendants.

​基于群组后代的样式 (group-has-{modifier})

¥Styling based on the descendants of a group (group-has-{modifier})

如果需要基于父元素的后代元素设置样式，可以使用 group 类标记父元素，并使用 group-has-* 修饰符设置目标元素的样式。

¥If you need to style an element based on the descendants of a parent element, you can mark the parent with the group class and use the group-has-* modifier to style the target element.

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

¥Styling based on the descendants of a peer (peer-has-{modifier})

如果需要基于同级元素的后代元素设置样式，可以使用 peer 类标记同级，并使用 peer-has-* 修饰符设置目标元素的样式。

¥If you need to style an element based on the descendants of a sibling element, you can mark the sibling with the peer class and use the peer-has-* modifier to style the target element.

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

使用 before 和 after 修饰符设置 ::before 和 ::after 伪元素的样式：

¥Style the ::before and ::after pseudo-elements using the before and after modifiers:

<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: ''，因此你无需指定它，除非你想要不同的值：

¥When using these modifiers, Tailwind will automatically add content: '' by default so you don’t have to specify it unless you want a different value:

<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 元素通常更简单。

¥It’s worth noting that you don’t really need ::before and ::after pseudo-elements for most things in Tailwind projects — it’s usually simpler to just use a real HTML element.

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

¥For example, here’s the same design from above but using a <span> instead of the ::before pseudo-element, which is a little easier to read and is actually less code:

<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 中并且不能被用户选择的情况。

¥Save before and after for situations where it’s important that the content of the pseudo-element is not actually in the DOM and can’t be selected by the user.

请注意，如果你禁用了我们的 预检基础样式，默认情况下内容属性将不会设置为空字符串，并且你需要在任何时候使用 before 和 after 修饰符时包含 content-['']。

¥Note that if you’ve disabled our preflight base styles, the content property will not be set to an empty string by default, and you will need to include content-[''] any time you use the before and after modifiers.

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

​占位符文本

¥Placeholder text

使用 placeholder 修饰符设置任何输入或文本区域的占位符文本的样式：

¥Style the placeholder text of any input or textarea using the placeholder modifier:

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

使用 file 修饰符在文件输入中设置按钮样式：

¥Style the button in file inputs using the file modifier:

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 的 边框重置 不适用于文件输入按钮。这意味着要向文件输入按钮添加边框，你需要使用类似 file:border-solid 的类以及任何 border-width 工具来显式设置 border-style：

¥Note that Tailwind’s border reset is not applied to file input buttons. This means that to add a border to a file input button, you need to explicitly set the border-style using a class like file:border-solid alongside any border-width utility:

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

​列表标记

¥List markers

使用 marker 修饰符在列表中设置计数器或项目符号的样式：

¥Style the counters or bullets in lists using the marker modifier:

<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> 元素上使用它，但你也可以在父元素上使用它以避免重复自己。

¥We’ve designed the marker modifier to be inheritable, so although you can use it directly on an <li> element, you can also use it on a parent to avoid repeating yourself.

​高亮的文本

¥Highlighted text

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

¥Style the active text selection using the selection modifier:

<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 修饰符设计为可继承的，因此你可以将其添加到树中的任何位置，并将应用于所有后代元素。

¥We’ve designed the selection modifier to be inheritable, so you can add it anywhere in the tree and it will be applied to all descendant elements.

这使得设置选择颜色以在整个站点上匹配你的品牌变得容易：

¥This makes it easy to set the selection color to match your brand across your entire site:

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

​首行和首字母

¥First-line and first-letter

使用 first-line 修饰符设置内容块中第一行的样式，使用 first-letter 修饰符设置第一个字母的样式：

¥Style the first line in a block of content using the first-line modifier, and the first letter using the first-letter modifier:

<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

使用 backdrop 修饰符设置 原生 <dialog> 元素 的背景样式：

¥Style the backdrop of a native <dialog> element using the backdrop modifier:

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

如果你在项目中使用原生 <dialog> 元素，你可能还想阅读有关使用 open 修饰符的 样式打开/关闭状态。

¥If you’re using native <dialog> elements in your project, you may also want to read about styling open/closed states using the open modifier.

​媒体和特性查询

¥Media and feature queries

​响应式断点

¥Responsive breakpoints

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

¥To style an element at a specific breakpoint, use responsive modifiers like md and lg.

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

¥For example, this will render a 3-column grid on mobile, a 4-column grid on medium-width screens, and a 6-column grid on large-width screens:

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

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

¥Check out the Responsive Design documentation for an in-depth look at how these features work.

​偏好配色方案

¥Prefers color scheme

prefers-color-scheme 媒体查询告诉你用户喜欢浅色主题还是深色主题，通常在操作系统级别配置。

¥The prefers-color-scheme media query tells you whether the user prefers a light theme or dark theme, and is usually configured at the operating system level.

使用没有修饰符的工具来定位亮模式，并使用 dark 修饰符为夜间模式提供覆盖：

¥Use utilities with no modifier to target light mode, and use the dark modifier to provide overrides for dark mode:

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

查看 夜间模式 文档以深入了解此功能的工作原理。

¥Check out the Dark Mode documentation for an in-depth look at how this feature works.

​偏好缩减动作

¥Prefers reduced motion

prefers-reduced-motion 媒体查询会告诉你用户是否已请求你尽量减少不必要的动作。

¥The prefers-reduced-motion media query tells you if the user has requested that you minimize non-essential motion.

当用户请求减少运动时，使用 motion-reduce 修饰符有条件地添加样式：

¥Use the motion-reduce modifier to conditionally add styles when the user has requested reduced motion:

<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 助手意味着必须对很多样式进行 “undo” 时很有用：

¥Tailwind also includes a motion-safe modifier that only adds styles when the user has not requested reduced motion. This can be useful when using the motion-reduce helper would mean having to “undo” a lot of styles:

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

prefers-contrast 媒体查询告诉你用户是否请求了更多或更少的对比度。

¥The prefers-contrast media query tells you if the user has requested more or less contrast.

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

¥Use the contrast-more modifier to conditionally add styles when the user has requested more contrast:

<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 修饰符，你可以使用它在用户请求较少对比度时有条件地添加样式。

¥Tailwind also includes a contrast-less modifier you can use to conditionally add styles when the user has requested less contrast.

​强制颜色模式

¥Forced colors mode

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

¥The forced-colors media query indicates if the user is using a forced colors mode. These modes override your site’s colors with a user defined palette for text, backgrounds, links and buttons.

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

¥Use the forced-colors modifier to conditionally add styles when the user has enabled a forced color mode:

<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 还包括 强制颜色调整 工具来选择强制颜色。

¥Tailwind also includes a forced color adjust utilities to opt in and out of forced colors.

​视口方向

¥Viewport orientation

当视口处于特定方向时，使用 portrait 和 landscape 修饰符有条件地添加样式：

¥Use the portrait and landscape modifiers to conditionally add styles when the viewport is in a specific orientation:

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

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

¥Use the print modifier to conditionally add styles that only apply when the document is being printed:

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

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

¥Use the supports-[...] modifier to style things based on whether a certain feature is supported in the user’s browser.

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

在引擎盖下，supports-[...] 修饰符生成 @supports rules 并在方括号之间使用任何你会用到 @supports (...) 的东西，比如属性/值对，甚至是使用 and 和 or 的表达式。

¥Under the hood the supports-[...] modifier generates @supports rules and takes anything you’d use with @supports (...) between the square brackets, like a property/value pair, and even expressions using and and or.

为了简洁起见，如果你只需要检查一个属性是否被支持（而不是一个特定的值），你可以只指定属性名称：

¥For terseness, if you only need to check if a property is supported (and not a specific value), you can just specify the property name:

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

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

¥You can configure shortcuts for common @supports rules you’re using in your project in the theme.supports section of your tailwind.config.js file:

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

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

¥You can then use these custom supports-* modifiers in your project:

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

​属性选择器

¥Attribute selectors

​ARIA 状态

¥ARIA states

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

¥Use the aria-* modifier to conditionally style things based on ARIA attributes.

例如，要在 aria-checked 属性设置为 true 时应用 bg-sky-700 类，请使用 aria-checked:bg-sky-700 类：

¥For example, to apply the bg-sky-700 class when the aria-checked attribute is set to true, use the aria-checked:bg-sky-700 class:

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

默认情况下，我们为最常见的布尔 ARIA 属性包含了修饰符：

¥By default we’ve included modifiers for the most common boolean ARIA attributes:

你可以通过编辑 tailwind.config.js 文件中的 theme.aria 或 theme.extend.aria 来自定义可用的 aria-* 修饰符：

¥You can customize which aria-* modifiers are available by editing theme.aria or theme.extend.aria in your tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      aria: {
        asc: 'sort="ascending"',
        desc: 'sort="descending"',
      },
    },
  },
};

如果你需要使用一次性的 aria 修饰符，而该修饰符在你的主题中包含没有意义，或者对于采用特定值的更复杂的 ARIA 属性，请使用方括号使用任意值即时生成属性。

¥If you need to use a one-off aria modifier that doesn’t make sense to include in your theme, or for more complex ARIA attributes that take specific values, use square brackets to generate a property on the fly using any arbitrary value.

<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-* 修饰符定位父元素和同级元素：

¥ARIA state modifiers can also target parent and sibling elements using the group-aria-* and peer-aria-* modifiers:

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

使用 data-* 修饰符有条件地应用基于 数据属性 的样式。

¥Use the data-* modifier to conditionally apply styles based on data attributes.

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

¥Since there are no standard data-* attributes by definition, by default we only support arbitrary values out of the box, for example:

<!-- 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 部分为项目中使用的常用数据属性选择器配置快捷方式：

¥You can configure shortcuts for common data attribute selectors you’re using in your project in the theme.data section of your tailwind.config.js file:

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

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

¥You can then use these custom data-* modifiers in your project:

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

​RTL 支持

¥RTL support

在构建多方向布局时，使用 rtl 和 ltr 修饰符分别在从右到左和从左到右模式下有条件地添加样式：

¥Use the rtl and ltr modifiers to conditionally add styles in right-to-left and left-to-right modes respectively when building multi-directional layouts:

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 模式下。

¥Note that the ltr modifier will not take effect unless the dir attribute is explicitly set to ltr, so if you are building a multi-directional site make sure to always set a direction, not just in rtl mode.

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

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

¥Remember, these modifiers are only useful if you are building a site that needs to support both left-to-right and right-to-left layouts. If you’re building a site that only needs to support a single direction, you don’t need these modifiers — just apply the styles that make sense for your content.

​打开/关闭状态

¥Open/closed state

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

¥Use the open modifier to conditionally add styles when a <details> or <dialog> element is in an open state:

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

​自定义修饰符

¥Custom modifiers

​使用任意变体

¥Using arbitrary variants

就像 任意值 允许你在工具类中使用自定义值一样，任意变体允许你直接在 HTML 中编写自定义选择器修饰符。

¥Just like arbitrary values let you use custom values with your utility classes, arbitrary variants let you write custom selector modifiers directly in your HTML.

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

¥Arbitrary variants are just format strings that represent the selector, wrapped in square brackets. For example, this arbitrary modifier selects an element only when it is the third child:

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

格式字符串与你在 addVariant 插件 API 中使用的格式字符串相同，& 表示正在修改的选择器。

¥The format string is the same as what you’d use with the addVariant plugin API, with the & representing the selector being modified.

任意变体可以与内置修饰符叠加或相互叠加，就像 Tailwind 中的其他修饰符一样：

¥Arbitrary variants can be stacked with built-in modifiers or with each other, just like the rest of the modifiers in Tailwind:

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

如果选择器中需要空格，可以使用下划线。例如，这个任意修饰符会选择你添加类的元素中的所有 p 元素：

¥If you need spaces in your selector, you can use an underscore. For example, this arbitrary modifier selects all p elements within the element where you’ve added the class:

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

你还可以在任意变体中使用 @media 或 @supports 等规则：

¥You can also use at-rules like @media or @supports in arbitrary variants:

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

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

¥With at-rule custom modifiers the & placeholder isn’t necessary, just like when nesting with a preprocessor.

你甚至可以通过在 at 规则之后的大括号内包含选择器修饰符来组合 at 规则和常规选择器修饰符：

¥You can even combine at-rules and regular selector modifiers by including the selector modifier within curly braces after the at-rule:

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

​创建插件

¥Creating a plugin

如果你发现自己在项目中多次使用相同的任意修饰符，则可能值得使用 addVariant API 将其提取到插件中：

¥If you find yourself using the same arbitrary modifier multiple times in your project, it might be worth extracting it to a plugin using the 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)')
    })
  ]
}

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

¥Learn more in the adding variant plugins documentation.

​高级主题

¥Advanced topics

​与你自己的类

¥Using with your own classes

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

¥All of Tailwind’s modifiers are available to use with your own custom classes as long as you’ve defined them in one of Tailwind’s layers or added them using a plugin:

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

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

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

​排序堆叠修饰符

¥Ordering stacked modifiers

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

¥When stacking modifiers, they are applied from the inside-out, like nested function calls:

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

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

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

¥For the most part this doesn’t actually matter, but there are a few situations where the order you use actually generates meaningfully different CSS.

例如，如果你将 darkMode 配置为 class，则组合 dark 和 group-hover 修饰符会根据你使用的顺序生成不同的结果：

¥For example, if you have darkMode configured to class, combining the dark and group-hover modifiers generates a different result depending on the order you use:

/* 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 元素的父元素，但在第二个示例中，情况正好相反。

¥In the first example, the dark element needs to be a parent of the group element, but in the second example it’s reversed.

另一个重要的地方是使用官方排版插件中包含的 prose-headings 等修饰符时：

¥Another place this is important is when using modifiers like prose-headings that are included with the official typography plugin:

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

在第一个示例中，当你将鼠标悬停在文章本身上时，每个标题都带有下划线，而在第二个示例中，当你将鼠标悬停在该标题上时，每个标题仅带有下划线。

¥In the first example, every single heading is underlined when you hover over the article itself, whereas in the second example each heading is only underlined when you hover over that heading.

​附录

¥Appendix

​快速参考

¥Quick reference

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

¥A quick reference table of every single modifier included in Tailwind by default.

​伪类参考

¥Pseudo-class reference

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

¥This is a comprehensive list of examples for all the pseudo-class modifiers included in Tailwind to complement the pseudo-classes documentation at the beginning of this guide.

​hover (:hover)

当用户使用 hover 修饰符将鼠标光标悬停在元素上时设置元素样式：

¥Style an element when the user hovers over it with the mouse cursor using the hover modifier:

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

​focus (:focus)

使用 focus 修饰符在元素具有聚焦时为其设置样式：

¥Style an element when it has focus using the focus modifier:

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

​focus-within (:focus-within)

当元素或其后代之一使用 focus-within 修饰符获得聚焦时，为该元素设置样式：

¥Style an element when it or one of its descendants has focus using the focus-within modifier:

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

​focus-visible (:focus-visible)

使用 focus-visible 修饰符在使用键盘获得聚焦时为元素设置样式：

¥Style an element when it has been focused using the keyboard using the focus-visible modifier:

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

​active (:active)

使用 active 修饰符按下元素时设置元素样式：

¥Style an element when it is being pressed using the active modifier:

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

​visited (:visited)

使用 visited 修饰符访问已访问过的链接样式：

¥Style a link when it has already been visited using the visited modifier:

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

​target (:target)

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

¥Style an element if its ID matches the current URL fragment using the target modifier:

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

​first (:first-child)

如果元素是第一个使用 first 修饰符的子元素，则为其设置样式：

¥Style an element if it’s the first child using the first modifier:

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

​last (:last-child)

如果元素是最后一个子元素，则使用 last 修饰符为其设置样式：

¥Style an element if it’s the last child using the last modifier:

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

​only (:only-child)

如果元素是唯一使用 only 修饰符的子元素，则为其设置样式：

¥Style an element if it’s the only child using the only modifier:

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

​odd (:nth-child(odd))

使用 odd 修饰符为奇数子元素设置样式：

¥Style an element if it’s an oddly numbered child using the odd modifier:

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

​even (:nth-child(even))

如果元素是偶数编号的子元素，则使用 even 修饰符为其设置样式：

¥Style an element if it’s an evenly numbered child using the even modifier:

<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 修饰符为其设置样式：

¥Style an element if it’s the first child of its type using the first-of-type modifier:

<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 修饰符为其设置样式：

¥Style an element if it’s the last child of its type using the last-of-type modifier:

<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 修饰符为其设置样式：

¥Style an element if it’s the only child of its type using the only-of-type modifier:

<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 修饰符为没有内容的元素设置样式：

¥Style an element if it has no content using the empty modifier:

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

​disabled (:disabled)

使用 disabled 修饰符禁用输入时设置输入样式：

¥Style an input when it’s disabled using the disabled modifier:

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

​enabled (:enabled)

使用 enabled 修饰符启用输入时设置输入样式，当你只想在未禁用元素时应用另一种样式时最有用：

¥Style an input when it’s enabled using the enabled modifier, most helpful when you only want to apply another style when an element is not disabled:

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

​checked (:checked)

使用 checked 修饰符选中时设置复选框或单选按钮的样式：

¥Style a checkbox or radio button when it’s checked using the checked modifier:

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

​indeterminate (:indeterminate)

使用 indeterminate 修饰符为不确定状态的复选框或单选按钮设置样式：

¥Style a checkbox or radio button in an indeterminate state using the indeterminate modifier:

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

​default (:default)

使用 default 修饰符为页面最初加载时的默认值设置选项、复选框或单选按钮的样式：

¥Style an option, checkbox or radio button that was the default value when the page initially loaded using the default modifier:

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

​required (:required)

在需要时使用 required 修饰符设置输入样式：

¥Style an input when it’s required using the required modifier:

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

​valid (:valid)

使用 valid 修饰符在输入有效时设置输入样式：

¥Style an input when it’s valid using the valid modifier:

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

​invalid (:invalid)

使用 invalid 修饰符在输入无效时设置输入样式：

¥Style an input when it’s invalid using the invalid modifier:

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

​in-range (:in-range)

当输入的值在指定的范围限制内时，使用 in-range 修饰符设置输入的样式：

¥Style an input when its value is within a specified range limit using the in-range modifier:

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

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

当输入的值超出指定范围限制时，使用 out-of-range 修饰符设置输入的样式：

¥Style an input when its value is outside of a specified range limit using the out-of-range modifier:

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

​placeholder-shown (:placeholder-shown)

使用 placeholder-shown 修饰符显示占位符时设置输入样式：

¥Style an input when the placeholder is shown using the placeholder-shown modifier:

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

​autofill (:autofill)

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

¥Style an input when it has been autofilled by the browser using the autofill modifier:

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

​read-only (:read-only)

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

¥Style an input when it is read-only using the read-only modifier:

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