Handling Hover, Focus, and Other States 处理悬停、焦点和其他状态

Tailwind 包含几乎所有你需要的修改器：

• 伪类，比如 :hover、:focus、:required
• 伪元素，比如：::before、::after
• 媒体和功能查询，比如: md:
• 属性选择器，比如：[dir="rtl"] 和 [open]

比如这样写

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

表示 在黑暗模式下、在中等断点处、悬停时更改背景颜色

官方的第二篇文档告诉我们
本指南将了解框架中可用的每个修饰符，如何将它们与您自己的自定义类一起使用，甚至如何创建您自己的修饰符

hover、focus、and active

略

First、last、odd、and 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>

Form states

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

基于父状态的样式

需要给父组件标记一个group，然后子组件用group-*来使用样式
如

<a href="#" class="group">
  <div class="">
    <svg class="group-hover:stroke-white" fill="none" viewBox="0 0 24 24"></svg>
    <h3 class="group-hover:text-white ">New project</h3>
  </div>
  <p class="group-hover:text-white">Create a new project from a variety of starting templates.</p>
</a>

如果有多层嵌套，则需要使用group/{name}的形式来区分，如

<ul role="list">
  {#each people as person}
    <li class="group/item hover:bg-slate-100 ...">
      <div>
       ...
      </div>
      <a class="group/edit hover:bg-slate-200 group-hover/item:visible ...">
        <span class="group-hover/edit:text-gray-700 ...">Call</span>
        <svg class="group-hover/edit:translate-x-0.5 group-hover/edit:text-slate-500 ...">
          <!-- ... -->
        </svg>
      </a>
    </li>
  {/each}
</ul>

也可以使用选择器，如

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

基于兄弟元素

关键词peer，用法和group一样，但是，peer-*只对该元素前，标记有peer的有效
比如：

<div class="peer-hover:text-white" />
<div class="peer" />

这种将peer放在后面的是不会生效的

直接子级的控制

关键词*，用在父元素上，比如

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

但是需要注意，如果父元素使用了 *:*，那么在子元素上单独设置 Tailwind 是不被允许的

后代的控制

关键词hax-*，用法同group
可以组合使用，如group-has-* 或者 peer-has-*

Before and after

<label class="block">
  <span class="after:content-['*'] after:ml-0.5 after:text-red-500 ">
    Email
  </span>
  <input type="email" name="email" class="" placeholder="you@example.com" />
</label>

图例

Placeholder text

关键词placeholder:*，快捷设置input的placeholder样式

Marker

关键词marker:*，快捷设置有序列表或者无序列表的标点样式，可以给ul或ol用，作用于全体li

Highlighted text

关键词selection:*，作用于选中文本后的样式，可继承并应用于后代元素

First-line and first-letter

关键词first-line，修饰文本第一行的样式
关键词first-letter，修饰文本第一个字的样式

Dialog backdrops

关键词backdrop，设置<dialog />的背景样式

响应式布局

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

以下都是媒体查询 @media

prefers-color-scheme 明暗主题

prefers-color-scheme 它用于匹配用户通过操作系统设置的明亮或夜间(暗)模式。它有两个不同的取值：light dark
关键词dark:*，切换为深色模式时，一些定制样式

prefers-reduced-motion 规则

关键词motion-reduce，源自 CSS 新的媒体查询，prefers-reduced-motion 规则查询用于减弱动画效果，除了默认规则，只有一种语法取值 prefers-reduced-motion: reduce，开启了该规则后，相当于告诉用户代理，希望他看到的页面，可以删除或替换掉一些会让部分视觉运动障碍者不适的动画类型

关键词motion-safe，当用户没有启用Reduced Motion偏好设置的时候

prefers-contrast 调整内容色彩对比度

关键词contrast-more、contrast-less

forced-colors 强制颜色模式

关键词forced-colors

orientation 横竖屏模式

关键词portrait，表示竖屏生效样式
关键词landscape，表示横屏生效样式

print 打印

关键词print，调出浏览器自带打印时的一些样式设置

@supports

关键词supports-[...]

以下是html标签上的自定义属性

Aria attributes

关键词aria-*，关联 HTML 属性中的 aria-* 属性

image.png

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

还可以结合group 和peer使用，语法如下：
group-aria-[sort=ascending]:rotate-0
peer-aria-[sort=descending]:rotate-180

Data attributes

关键词data-*/[]，同 aria

Open/closed state

关键词open:*，修改<details> 或 <dialog>的样式

API合集

https://www.tailwindcss.cn/docs/hover-focus-and-other-states#quick-reference

总结

截止到媒体查询，基本都是可以常用的，自定义属性的话，因为用的是 React 或 Vue，可以直接根据 data / state 判断条件，个人感觉应用面应该比较少