TailwindCSS 从零开始 - 让 Variants 成为伪类的强大神器

除了 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

因为 CodePen 无法载入 tailwind.config.js 的内容，所以要在本地端时做才会有效果喔！

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

除了 Group-hover 外，还有其他效果，可以看 Tailwind CSS - 伪类变体 Pseudo-Class Variants 有介绍与响应式的合体技喔！

客制化自己的 Variants

如果觉得每次要去改预设设定档很麻烦，那就自己弄一个专属此案件的 variants 吧！

首先我想设定一个香蕉的 variants 来用，就在一开始预设的 style.css 档案中加入我要的样式。

记得储存加编译，我知道你也忘记了，编译指令如下：

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

编译结束後怎麽知道有没有成功？

这时就可以到编译後的 tailwind.css 搜寻 banana，然後就会看到自定义的 banana 样式出现在里面罗！

写到这边真的觉得 TailwindCSS 真的很便利於开发呢！

参考资料

• 【Tailwind CSS 教学 - 9】强大 Variant 让你写 CSS 伪元素不卡卡
• TailwindCSS - Group-hover