Tailwind CSSでHTML属性に対する疑似クラスのスタイリングをする方法

こんにちは。エキサイトでデザイナーをしている齋藤です。

今回は、Tailwind CSSでHTML属性に対する疑似要素のスタイリングをする方法をご紹介します。

実現したいこと

冒頭、実現したいことを整理します。

HTMLの各タグには属性が用意されていることがあり、要素の動作を制御することができます。

inputタグのdisabled属性などがこれにあたります。

CSSではHTML属性に対して疑似クラスが存在し、{タグ}:{属性名}の様式でスタイリングすることができます。

input:disabled {
    background: red;
}

お示ししたCSSの例では、「disabled属性がtrueのinput要素は背景が赤になる」というスタイリングを表現しています。

一方で今回実現したいのは、Tailwind CSSでTailwind CSSでHTML属性に対する疑似クラスのスタイリングをすることです。

結論から申し上げると、Tailwind CSSでは {属性名}:{ユーティリティクラス} の様式を用いることで、擬似クラスを用いたスタイリングが可能です。

先の例をTailwind CSSで表現すると以下のようになります。

<input class="disabled:bg-red-500" ...>

disabled属性以外にも用意されています。対応一覧は公式ドキュメントをご参照ください。

擬似クラスに対して複数のユーティリティクラスを指定したい場合は、都度接頭辞として{属性名}:を付与する必要があります。

純粋なCSSでは宣言ブロック内に複数のプロパティを記述することが可能です。

input:disabled {
    background: red;
    border-color: red;
}

Tailwind CSSの場合は、ユーティリティクラスに対して都度接頭辞として{属性名}:を付与します。

<input class="disabled:bg-red-500 disabled:border-red-500" ...>

今回は、Tailwind CSSでHTML属性に対する疑似要素のスタイリングをする方法をご紹介しました。

Tailwind CSSは純粋なCSSの機能と互換するように設計されているため、書き味は異なりますがスタイリングの幅はほぼ変わらずに十分な表現ができます。

一方で、擬似クラスなどを多用していくとどうしても可読性は低下します。

可読性を担保するためにPrettierのプラグインを使用して、class属性内を規則的に並び替えるようにすることをおすすめします。

Tailwind CSSを使用される方の一助となれば幸いです。ご精読ありがとうございました。