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

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です。これらは、最初から使うことができます。

VariantDescription
responsivesmmdlgxlのようなレスポンシブなVariant
darkダークモードをターゲットにする
motion-shafeprefers-reduced-motion: no-preference メディアクエリをターゲットにする
motion-reduceprefers-reduced-motion: reduce メディアクエリをターゲットにする
firstfirst-child 疑似クラスをターゲットにする
lastlast-childの疑似クラスをターゲットにする
oddodd-childの疑似クラスをターゲットにする
eveneven-lastの疑似クラスをターゲットにする
visitedvisitedの疑似クラスをターゲットにする
checkedchecked疑似クラスをターゲットにする
group-hoverマークされた親要素がhover疑似クラスにマッチするとき、その要素をターゲットにする
group-focusマークされた親要素がfocus疑似クラスにマッチするとき、その要素をターゲットにする
focus-withinfocus-within擬似クラスをターゲットにする
hoverhover疑似クラスをターゲットにする
focusfocus疑似クラスをターゲットにする
focus-visiblefocus-visible疑似クラスをターゲットにする
activeactive疑似クラスをターゲットにする
disableddisabled疑似クラスをターゲットにする
https://v2.tailwindcss.com/docs/configuring-variants

おわりに

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

まい

フロントエンドエンジニア目指して、勉強中です。

Tailwind CSSカテゴリの最新記事