此系列文章已改編成書，歡迎購買：https://www.tenlong.com.tw/products/9786267146460?list_name=i-r-zh_tw

什麼是偽類變體

又來一個專有名詞，還沒學就心慌慌...

但是發現有一個熟悉名詞：偽類(看到這個我就放一半的心了)。在傳統 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