iT邦幫忙

2021 iThome 鐵人賽

DAY 11
0
Modern Web

TailwindCSS - 從零開始系列 第 11

TailwindCSS 從零開始 - 讓 Variants 成為偽類的強大神器

tailwindcss

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

除了 Tailwind CSS - 設定自己想要的 TailwindCSS 樣式 Variant 提到可以自訂 hover 在想要的樣式裡外,此框架的作者還很貼心的寫了一個效果, Group-hover

Group-hover

在介紹 Group-hover 前,先講一下,如果是傳統寫 CSS 的話是什麼狀況。

先給個情境,規格書來個需求說:

  1. 要有張卡片。
  2. 滑鼠經過時,卡片背景色與卡片標題要變色。

所以傳統的 CSS 就會變成:

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

當然對於切版熟手或許這個沒什麼問題,但還是回到原本的困擾,要想命名,要分層去寫效果進去,如果今天拆分元件,可能也無法所有的樣式都共用。

如果遇到會有群組型的 hover 樣式,透過 TailwindCSS 可以這樣寫:

  <div
  class="
      group
      px-6
      py-5
      w-72
      rounded
      space-y-1
      bg-gray-200
      hover:bg-yellow-200
      "
>
  <div
    class="
      text-2xl text-gray-700
      group-hover:text-blue-800 group-hover:text-4xl
      "
  >
    Card Title
  </div>
  <p>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam
    repellendus error, qui natus ea quas, aut, ipsa illo cupiditate corrupti in
    quaerat enim. Iusto, impedit? Est saepe ratione dolorum officiis?
  </p>
</div>

只要加上想要呈現的 class,一行 CSS 都不用寫,而且也不用想命名,真是太方便了!

但是發現一件事情,為什麼改用 TailwindCSS 寫完後文字不會再 hover 的時候改變樣式呢?

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

原因是預設設定檔,沒有加入 group-hover 的樣式,所以要手動加入,在 tailwindcss.config.js 設定檔更新如下:

tailwindcss.config.js

module.exports = {
    purge: {
        enabled: true,
        content: ["./*.html"],
    },
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {
            borderStyle: ["responsive", "hover"],
            fontSize: ['responsive',"group-hover"], //加入 group-hover
        },
    },
    plugins: [],
};

hover

hover

因為 CodePen 無法載入 tailwind.config.js 的內容,所以要在本地端時做才會有效果喔!

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

除了 Group-hover 外,還有其他效果,可以看 Tailwind CSS - 偽類變體 Pseudo-Class Variants 有介紹與響應式的合體技喔!

客製化自己的 Variants

如果覺得每次要去改預設設定檔很麻煩,那就自己弄一個專屬此案件的 variants 吧!

首先我想設定一個香蕉的 variants 來用,就在一開始預設的 style.css 檔案中加入我要的樣式。

style

記得儲存加編譯,我知道你也忘記了,編譯指令如下:

npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css

編譯結束後怎麼知道有沒有成功?

這時就可以到編譯後的 tailwind.css 搜尋 banana,然後就會看到自定義的 banana 樣式出現在裡面囉!

banana

寫到這邊真的覺得 TailwindCSS 真的很便利於開發呢!

參考資料


上一篇
TailwindCSS 從零開始 - 設定自己想要的 TailwindCSS 樣式 Variant
下一篇
TailwindCSS 從零開始 - 把重複使用的功能變成元件
系列文
TailwindCSS - 從零開始30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言