TailwindCSS 从零开始 - 伪类变体 Pseudo-Class Variants

什麽是伪类变体

又来一个专有名词，还没学就心慌慌...

但是发现有一个熟悉名词：伪类(看到这个我就放一半的心了)。在传统 CSS 中，常常会使用伪元素，像是 :hover, :active, :focus...等等。以前如果要写一个 a 连结，然後要 hover 效果会变色的话会写：

demo: https://codepen.io/hnzxewqw/pen/RwpqOzm

但使用 Tailwind 之後只要在想使用伪类效果的地方加上想用的伪类，就可以达到预期的效果，像是我我把上方范例改写成 Tailwind 的方式的话，会是：

demo: https://codepen.io/hnzxewqw/pen/VwpVOwR

但其实 Tailwind 规划伪类变体的方法跟传统的 CSS 是不同的，当我滑鼠移到 hover:text-red-500，会出现提示讯息：

原来它是把 hover 包装成一个 class，然後再去执行文字变色的效果有 hover 的伪类。

智能提示的方便之处

顺便提一下智能提示有一个很方便的地方，也就是当我在打想要使用的 class 时，旁边会跳出提示讯息，告诉我此 class 在编译成 CSS 後会是什麽设定，这样就不用一直去测试 Tailwind 的 class 效果是什麽罗！

还有更多伪类变体可以使用

除了上方介绍的 hover 外，还有以下可以使用的伪类变体，都可以到官方文件复制下来玩玩看。

• Hover
• Focus
• Active
• Group-hover
• Group-focus
• Focus-within
• Focus-visible
• Motion-safe
• Motion-reduce
• Disabled
• Visited
• Checked
• First-child
• Last-child
• Odd-child
• Even-child

伪类变体与响应式的合体技

Tailwind CSS - 手机到桌上萤幕，所有的元素都能自适应有介绍过 Tailwind 自适应的强大之处，与伪类变体结合更是超强合体技！如下方范例，在解析度 375px 与超过 375px 时，可以让按钮在不同的解析度下有不同的 hover 效果喔！

demo: https://codepen.io/hnzxewqw/pen/yLMQWwq

参考资料

• TailwindCSS - Hover, Focus, & Other States