Tailwind CSSでdisabled

Tailwind CSS

Tailwind CSSでdisabled属性がついた要素に対してスタイルを当てたい場合には、disabled擬似クラスを利用して指定を行います。

以下のようにdisabled:をつけることでdisabled属性がついた場合のスタイルが定義できます。

<input type="text" disabled class="disabled:bg-gray-400" />

disabled属性がついた要素の兄弟要素

peer

disabled属性がついた要素の兄弟要素にスタイルを指定したい場合はpeerを利用します。
disabled属性がついた要素にclass属性「peer」を指定して、兄弟要素には「peer-disabled:」としてdisabled属性がついた場合のスタイルが定義できます。

<input type="text" disabled class="peer" />
<label class="peer-disabled:bg-gray-400">text</label>

arbitrary variants

arbitrary variantsを利用するとCSSセレクタを利用してより柔軟に指定ができます。

[:disabled+&]:と指定をすると隣接セレクタを利用してdisabled属性が指定された要素の次に登場する要素の場合という条件の場合のスタイルが定義できます。

<input type="text" disabled class="peer" />
<label class="[:disabled+&]:bg-gray-400">text</label>

スポンサードリンク

«Vue.jsでコンポーネントの要素をpropsによって切り替える | メイン | Tailwind CSSで任意のメディアクエリを指定する»