[筆記] Tailwind css – 偽類變體和 Variants

Posted onAuthorANDY LIEN

章節連結

從 Tailwind CSS 問世以來，也經歷過了數年發展來到第 3 代。這回筆記下 tailwind css 實現 psuedo 偽元素操作的方法以及 variants 的操作。
tailwind-css

內容

1. tailwind css 實現 psuedo 元素效果的作法，是將 hover 的語句包裝成一個 class 去執行。完整的列表可以參考這個連結：https://tailwindcss.com/docs/hover-focus-and-other-states#pseudo-classes
2. v2.2 會需要額外在 config 引入設定 (npx tailwind css init –full)；v3.0 以後 variants 預設都是全部開啟的
3. 若你有一個父元素，內有需多子元素要在 psuedo 元素效果發生時做變動，除了一個個下 <psuedo>:<效果> 外，也可以在父層使用 group 元素，然後內部用 group-<psuedo>:<效果> 來共享效果

程式碼

https://github.com/andy922200/tailwindcss-3-learning/commit/310354ecdc2bb90b077bd7f62336366267290165

系列文章

  • [筆記] Tailwind css 3.0 從零開始 – 架設開發環境 – 1
  • [筆記] Tailwind css – 自適應 RWD 的開發 Best Practice
  • [筆記] Tailwind css – 留言按鈕實作
  • [筆記] Tailwind css – 含 RWD 的三欄式卡片製作
  • [筆記] Tailwind css – 使用預設樣式和修改它
  • [筆記] Tailwind css – 使用官方定義樣式
  • [筆記] Tailwind css – Utility-First 功能優先初體驗
  • [筆記] Tailwind css – Utility Class 設定響應式
  • [筆記] Tailwind css – JIT Just-In-Time Mode 模式簡介
  • [筆記] Tailwind css – Dark Mode 深色模式
    • 按讚加入粉絲團

    延伸閱讀