なつねこメモ

主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ﾉ

2021/04/09

TailwindCSS で新しいバリアントを追加したい

カテゴリー：

私は CSS を書きたくないタイプの人間なので、基本的には Bootstrap や TailwindCSS みたいな、
CSS フレームワークを使って Web サイトを構築するタイプの人間です。

ということで、今日はそのうちの TailwindCSS のお話

例えば、 CSS 疑似要素の first-letter を使いたい場合、
TailwindCSS では標準では用意されていないので、バリアントを追加する、
といった方法で実装することになります。

TailwindCSS でバリアントを追加する方法は下のような感じ

tailwind.config.js

const plugin = require("tailwindcss/plugin");
 
module.exports = {
  // 略
  plugins: [
    plugin(function({addVariant, e}) {
      addVariant("first-letter", ({modifySelectors, separator}) => {
        modifySelectors(({className}) => {
          return `.${e(`first-letter${separator}${className}`)}:first-letter`
        })
      })
    }),
  ],
}

ここは基本上みたいな感じにしてあげれば良い。あとは、使いたいプラグインの所に対して、 extend で設定を追加してあげれば使えるようになります。例えば文字色を最初の文字だけ変えたい、みたいな場合は、下記のようにしてあげる。

module.exports = {
  // 略
  variants: {
    extend: {
      textColor: ["first-letter"],
    },
  },
};

簡単ですね。ではでは。

参考 :

Configuring Variants - Tailwind CSS