TailwindCSS 特定のクラスを持つ要素や特定のセレクタに適用する方法＆独自のVariantを追加する方法

特定のクラスを持つ要素や特定のセレクタにTailwindCSSを適用したいときに、どうすればいいのか迷ったので、調べたことをまとめてみました。

特定のクラス名を持つ要素やセレクタに、TailwindCSSを適用するには

TailwindCSSは、class="text-red-500 hover:text-red-300"というように、擬似要素に適用するスタイルを一緒に記述することが可能です。この擬似要素などのターゲットとなる部分は、Variantといいます。バリエーションという意味になるようです。

Variantは、デフォルトで多くの擬似要素が組み込まれていますが、TailwindCSSでは、自分で独自にVariantを追加することも可能です。
※この機能は、TailwindCSS v3.1から追加された機能です。古いバージョンでは使えないので、ご注意ください。

方法1: プラグインを使ってVariantを追加する

addVariantという関数を使って、独自のVariantを追加・登録しておくことが可能です。tailwind.config.jsに記述します。何度も共通で使い回す必要があるようなVariantは、あらかじめ登録しておくと便利です。

書き方は以下のようになります。任意のVariant名と、指定する要素となるクラス名や子孫要素などを文字列で指定します。指定する要素の文字列には、&がないとエラーになります。

//addVariant関数を使うために、プラグインをインポート
const plugin = require('tailwindcss/plugin');

module.exports = {
  plugins: [
    plugin(function ({ addVariant }) {
      addVariant('active', '&.is-active'), //activeがVariant名になります
      addVariant('second', '&:nth-child(2)'),
    })
  ]
}

addVariantで追加したVariantは、HTML側では、下記のように使います。擬似要素のVariantと同じような形で、独自に追加したVariantも、複数組み合わせて使うことができます。※ @applyの中でも使用可能です。

<div class="text-gray-900 active:text-red-500 second:bg-yellow-500"></div>

方法2.HTMLで直接Variantを指定する

HTMLで直接、Variantを指定することもできます。繰り返し使わないような一回限りのVariantに向いていると思います。[&.is-active]や[&:nth-child(2)]のように指定して使います。

<div class="text-gray-900 [&.is-active]:text-red-500 [&:nth-child(2)]:bg-yellow-500"></div>

デフォルトのVariant

デフォルトでサポートされているVariantです。これらは、最初から使うことができます。

おわりに

今回は、TailwindCSSを特定のクラスを持つ要素や特定のセレクタに適用する方法について、addVariant関数を使う方法と、直接HTMLで指定する方法をご紹介しました。ぜひ使ってみてください！