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

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

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

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

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

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