iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
Modern Web

TailwindCSS - 從零開始系列 第 9

TailwindCSS 從零開始 - 偽類變體 Pseudo-Class Variants

tailwindcss

什麼是偽類變體

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

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

tip

原來它是把 hover 包裝成一個 class,然後再去執行文字變色的效果有 hover 的偽類。

智能提示的方便之處

順便提一下智能提示有一個很方便的地方,也就是當我在打想要使用的 class 時,旁邊會跳出提示訊息,告訴我此 class 在編譯成 CSS 後會是什麼設定,這樣就不用一直去測試 Tailwind 的 class 效果是什麼囉!

tips

還有更多偽類變體可以使用

除了上方介紹的 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 從零開始 - 增加 Base 樣式
下一篇
TailwindCSS 從零開始 - 設定自己想要的 TailwindCSS 樣式 Variant
系列文
TailwindCSS - 從零開始30

尚未有邦友留言

立即登入留言