hover

鼠标悬停在元素上，用hover:

    <div class="p-2">
        <div class="w-24 h-24 bg-black hover:bg-red-500"></div>
    </div>

focus

元素获得焦点，用focus:。div正常情况下不算是交互控件，没有focus状态，但可以通过tabindex属性来强行给div解释成一个有focus和active状态的元素。

    <div class="p-2 flex">
        <div class="w-12 h-12 bg-gray-300 focus:bg-gray-700" tabindex="0"></div>
        <div class="w-12 h-12 bg-red-300 focus:bg-red-700" tabindex="0"></div>
        <div class="w-12 h-12 bg-blue-300 focus:bg-blue-700" tabindex="0"></div>
        <div class="w-12 h-12 bg-yellow-300 focus:bg-yellow-700" tabindex="0"></div>
        <div class="w-12 h-12 bg-purple-300 focus:bg-purple-700" tabindex="0"></div>
    </div>

focus-within

子元素获得焦点，则应用样式

    <div class="p-2 flex">
        <div class="w-24 h-24 bg-red-300 focus-within:bg-red-700">
            <div class="w-12 h-12 bg-black" tabindex="0"></div>
        </div>
        <div class="w-24 h-24 bg-yellow-300 focus-within:bg-yellow-700">
            <div class="w-12 h-12 bg-black" tabindex="0"></div>
        </div>
    </div>

focus-visible

仅当元素是用键盘获得焦点时，才应用样式。鼠标点的不算

    <div class="p-2 flex">
        <div class="w-12 h-12 bg-gray-300 focus-visible:bg-gray-700" tabindex="0"></div>
        <div class="w-12 h-12 bg-red-300 focus-visible:bg-red-700" tabindex="0"></div>
        <div class="w-12 h-12 bg-blue-300 focus-visible:bg-blue-700" tabindex="0"></div>
        <div class="w-12 h-12 bg-yellow-300 focus-visible:bg-yellow-700" tabindex="0"></div>
        <div class="w-12 h-12 bg-purple-300 focus-visible:bg-purple-700" tabindex="0"></div>
    </div>

active

典型的是按钮<button>，当鼠标按下不松手时，就是active状态。和focus一样，<div>天生也没有active，但可以通过tabindex属性来强行解释。

    <div class="p-2 flex">
        <div class="w-12 h-12 bg-gray-300 active:bg-gray-700" tabindex="0"></div>
        <div class="w-12 h-12 bg-red-300 active:bg-red-700" tabindex="0"></div>
        <div class="w-12 h-12 bg-blue-300 active:bg-blue-700" tabindex="0"></div>
        <div class="w-12 h-12 bg-yellow-300 active:bg-yellow-700" tabindex="0"></div>
        <div class="w-12 h-12 bg-purple-300 active:bg-purple-700" tabindex="0"></div>
    </div>

visited

这是一个仅为<a>设计的伪类，表示用户访问过的链接

    <a href="#" class="visited:text-red-500" >some link</a>

现代浏览器通常对visited伪类有诸多限制，一般情况下仅允许修改前景色，而像边框、背景图等，浏览器一般不会尊重这些样式。也就是说像visited:bg-red-500这种样式一般浏览器是不屌的。

target

如果当前元素的ID与URL上的#xxx后面的xxx一致的话，这个伪类就会生效

    <a href="#heading1" >nav to #heading1</a>
    <br/>
    <a href="#heading2" >nav to #heading2</a>
    <br/>
    <a href="#" >nav to empty</a>
    <br/>
    <div class="flex">
        <div id="heading1" class="w-12 h-12 bg-yellow-300 target:bg-yellow-700"></div>
        <div id="heading2" class="w-12 h-12 bg-red-300 target:bg-red-700"></div>
        <div id="heading3" class="w-12 h-12 bg-purple-300 target:bg-purple-700"></div>
    </div>

first-child和last-child

分别用来将样式应用在第一个子元素和最后一个子元素身上。注意这里的“子元素”指的是XML角度的子元素，而不是非得是<ul>或<ol>

第二点需要注意的是，与上面介绍的伪类不一样，这里，CSS中的伪类叫first-child和last-child，但在tailwind中，前缀名仅是first和last，没有-child

    <div class="flex p-2">
        <div class="w-12 h-12 bg-yellow-300 first:bg-red-300 last:bg-purple-300"></div>
        <div class="w-12 h-12 bg-yellow-300 first:bg-red-300 last:bg-purple-300"></div>
        <div class="w-12 h-12 bg-yellow-300 first:bg-red-300 last:bg-purple-300"></div>
        <div class="w-12 h-12 bg-yellow-300 first:bg-red-300 last:bg-purple-300"></div>
        <div class="w-12 h-12 bg-yellow-300 first:bg-red-300 last:bg-purple-300"></div>
    </div>

only-child

伪类叫only-child，tailwind前缀仅有only，当元素自身是父元素的唯一元素时，样式生效

    <div class="flex p-2">
        <div class="w-12 h-12 bg-yellow-300 only:bg-purple-300"></div>
        <div class="w-12 h-12 bg-yellow-300 only:bg-purple-300"></div>
    </div>
    <div class="flex p-2">
        <div class="w-12 h-12 bg-yellow-300 only:bg-purple-300"></div>
    </div>

nth-child(odd)和nth-child(even)

伪类叫nth-child(odd)和nth-child(even)，但tailwind只需要使用even和odd即可

    <div class="flex p-2">
        <div class="w-12 h-12 bg-yellow-300 odd:bg-purple-300 even:bg-red-300"></div>
        <div class="w-12 h-12 bg-yellow-300 odd:bg-purple-300 even:bg-red-300"></div>
        <div class="w-12 h-12 bg-yellow-300 odd:bg-purple-300 even:bg-red-300"></div>
        <div class="w-12 h-12 bg-yellow-300 odd:bg-purple-300 even:bg-red-300"></div>
        <div class="w-12 h-12 bg-yellow-300 odd:bg-purple-300 even:bg-red-300"></div>
        <div class="w-12 h-12 bg-yellow-300 odd:bg-purple-300 even:bg-red-300"></div>
    </div>

nth-child(?)与nth-last-child(?)

伪类叫nth-child(3)，tailwind中只需要使用nth-3即可。nth-last-child(2)简化为nth-last-2

    <div class="flex p-2">
        <div class="w-12 h-12 bg-yellow-300 nth-3:bg-purple-300 nth-last-2:bg-red-300"></div>
        <div class="w-12 h-12 bg-yellow-300 nth-3:bg-purple-300 nth-last-2:bg-red-300"></div>
        <div class="w-12 h-12 bg-yellow-300 nth-3:bg-purple-300 nth-last-2:bg-red-300"></div>
        <div class="w-12 h-12 bg-yellow-300 nth-3:bg-purple-300 nth-last-2:bg-red-300"></div>
        <div class="w-12 h-12 bg-yellow-300 nth-3:bg-purple-300 nth-last-2:bg-red-300"></div>
        <div class="w-12 h-12 bg-yellow-300 nth-3:bg-purple-300 nth-last-2:bg-red-300"></div>
    </div>

各种type伪类

与各种child伪类相似，也有以下的type伪类

具体效果非常直观，这里不赘述