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>
图例
当你使用这两个伪元素的时候，Tailwind 会自动创建 content（应该是为
''），除非需要定制别的内容实际上更推荐使用 HTML 元素，因为操作起来更简单
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 判断条件，个人感觉应用面应该比较少
网友评论