特定のクラスを持つ要素や特定のセレクタに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
です。これらは、最初から使うことができます。
Variant | Description |
---|---|
responsive | sm 、md 、lg 、xl のようなレスポンシブなVariant |
dark | ダークモードをターゲットにする |
motion-shafe | prefers-reduced-motion: no-preference メディアクエリをターゲットにする |
motion-reduce | prefers-reduced-motion: reduce メディアクエリをターゲットにする |
first | first-child 疑似クラスをターゲットにする |
last | last-child の疑似クラスをターゲットにする |
odd | odd-child の疑似クラスをターゲットにする |
even | even-last の疑似クラスをターゲットにする |
visited | visited の疑似クラスをターゲットにする |
checked | checked 疑似クラスをターゲットにする |
group-hover | マークされた親要素がhover 疑似クラスにマッチするとき、その要素をターゲットにする |
group-focus | マークされた親要素がfocus 疑似クラスにマッチするとき、その要素をターゲットにする |
focus-within | focus-within 擬似クラスをターゲットにする |
hover | hover 疑似クラスをターゲットにする |
focus | focus 疑似クラスをターゲットにする |
focus-visible | focus-visible 疑似クラスをターゲットにする |
active | active 疑似クラスをターゲットにする |
disabled | disabled 疑似クラスをターゲットにする |
おわりに
今回は、TailwindCSSを特定のクラスを持つ要素や特定のセレクタに適用する方法について、addVariant関数を使う方法と、直接HTMLで指定する方法をご紹介しました。ぜひ使ってみてください!