Hover, focus 和 active
使用hover、focus和active修饰符为元素设置悬停、聚焦和激活状态的样式
也可以通过:visited、:focus-within、:focus-visible等多种修饰符来设置元素的伪类
<!--
bg-violet-500 --- 普通情况下的样式
hover:bg-violet-600 --- 元素处于hover状态下的样式
active:bg-violet-700 --- 元素处于active状态下的样式
focus:outline-none --- 元素处于focus状态下的样式
-->
<button class="bg-violet-500 hover:bg-violet-600 active:bg-violet-700 focus:outline-none">
Save changes
</button>
First, last, odd 和 even
通过first和last修饰符来为第一个元素和最后一个元素设置样式
<!--
first:pt-0 --- 列表第一个元素上内边距为0px
last:pb-0 --- 列表最后一个元素的下内边距为0px
-->
<ul class="flex py-4 first:pt-0 last:pb-0">
<li>item 0</li>
<li>item 1</li>
<li>item 2</li>
</ul>
通过even和odd来为奇数位或偶数位元素设置对应的样式
<!--
odd:bg-white --- 奇数位 --- 背景为白色
even:bg-slate-50 --- 偶数为 --- 背景为slate-50
-->
<tr class="odd:bg-white even:bg-slate-50">
<td>{person.name}</td>
<td>{person.title}</td>
<td>{person.email}</td>
</tr>
Tailwind还包括其他结构伪类的修饰符，例如:only-child、:first-of-type、:empty等
具体可以查看索引列表进行查阅
表单状态
通过表单状态的伪类可以在不编写JavaScript逻辑的情况下，添加上正确的样式
有关可用伪类修饰符的完整列表，请参见伪类参考
<!--
w-full --- 普通状态下 --- 宽度充满父容器
focus:border-sky-500 --- 获取焦点的时候 边框的样式为sky-500
disabled:bg-slate-50 --- 不可交互的时候 背景颜色为slate-50
invalid:text-pink-600 --- 校验失败的时候 文本颜色为pink-600
focus:invalid:border-pink-500 --- 可以同时添加多个限定状态
-->
<input type="text" value="tbone" disabled class="w-full focus:border-sky-500 disabled:bg-slate-50 invalid:text-pink-600 focus:invalid:border-pink-500"/>
基于父组件的样式设置
当需要基于某些父元素的状态来设置子元素样式时
可以将父元素标记为 group 类，使用 group-* 修饰符 来设置目标元素的样式
<a href="#" class="group">
<p class="group-hover:text-white">Create a new project</p>
</a>
如果存在多个父元素的时候，可以通过group/{name}来为父元素设置具体的名称
在子元素中通过group-*/{name} 来在特定父元素位于某个状态的时候添加对应的样式
<li class="group/item">
<a class="group/edit" href="#">
<span class="group-hover/edit:text-gray-700 ...">Call</span>
<svg class="group-hover/edit:translate-x-0.5">
<!-- ... -->
</svg>
</a>
</li>
可以使用方括号来创建 Tailwind 的任意组（arbitrary groups）
通过任意组和CSS选择器的组合，可以在某个CSS选择器被添加时，添加的特有样式
<div class="group is-published">
<!-- 当父元素有.is-published的时候，设置display为block -->
<div class="hidden group-[.is-published]:block">
Published
</div>
</div>
为了更精确地控制生成的选择器，可以使用 "&" 字符来标记在生成的选择器中 .group 相对于传递的选择器的位置
<div class="group">
<div>First child</div>
<div>Second child</div>
<!--
group-[:nth-of-type(1)_&]:text-red-500
会被编译为
:nth-of-type(1) .group .group-\[\:nth-of-type\(1\)_\&\]\:text-red-500
-->
<div class="group-[:nth-of-type(1)_&]:text-red-500">Third child</div>
</div>
<div class="group">
<div>First child</div>
<div>Second child</div>
<!--
group-[:nth-of-type(1)]:text-red-500
会被编译为
.group:nth-of-type(1) .group-\[\:nth-of-type\(1\)\]\:text-red-500
-->
<div class="group-[:nth-of-type(1)]:text-red-500">Third child</div>
</div>
基于兄弟元素的样式设置
当需要根据同级元素的状态来设置样式时，可以使用对等类(peer class)标记同级元素，并使用peer-*修饰符（如peer-invalid）来设置目标元素的样式
此时就可以通过各种巧妙的技巧来实现一些效果，而无需任何JavaScript代码
因为原生CSS的限制，只能为后继兄弟添加对应的样式
<input type="email" class="peer"/>
<p class="peer-invalid:visible"> Please provide a valid email address. </p>
当使用多个同级元素时，可以通过使用peer/{name}类为该同级元素指定唯一名称，并在修饰符中使用类似peer-*/{name}的类来针对特定同级元素的状态设置样式
<input id="draft" class="peer/draft" type="radio" name="status" checked />
<label for="draft" class="peer-checked/draft:text-sky-500">Draft</label>
可以使用方括号来创建 Tailwind 的任意组（arbitrary groups）
通过任意组和CSS选择器的组合，可以在某个CSS选择器被添加时，添加的特有样式
<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>
为了更精确地控制生成的选择器，可以使用 "&" 字符来标记在生成的选择器中 .peer 相对于传递的选择器的位置
<!-- :last-child .peer ~ .peer-\[\:last-child_\&\]\:text-red-500 -->
<div class="peer">peer</div>
<div class="peer-[:last-child_&]:text-red-500">lorem</div>
<!-- .peer:last-child ~ .peer-\[\:last-child]\:text-red-500 -->
<div class="peer">peer</div>
<div class="peer-[:last-child]:text-red-500">lorem</div>
