Tailwind CSSでdata属性にスタイルを設定する

Tailwind CSSでdata属性に対してスタイルを設定する方法をメモ。
使用環境はAastro 5.16.0 / Tailwind CSS 4.1.17になります。

サンプルコード

data-XXXのような属性が付与されている場合にスタイルを設定したい場合、classの前にdata-XXX:を付与します。
例として、data-activeがある場合にスタイルを設定してみます。

<div
  class="
    data-active:bg-red-700
  "
>data-activeなし</div>
<div
  data-active
  class="
    data-active:bg-red-700
  "
>data-activeあり</div>

これでdata-activeがある場合のみ背景色が設定されました。
data属性がある場合にスタイルを設定するデモページ

次にdata属性に任意の値がある場合にスタイルを設定する方法です。

<div
  class="
    data-[size=large]:bg-red-700
  "
>data-sizeなし</div>
<div
  data-size
  class="
    data-[size=large]:bg-red-700
  "
>data-sizeあり</div>
<div
  data-size="large"
  class="
    data-[size=large]:bg-red-700
  "
>data-size="large"</div>

data属性に任意の値がある場合にスタイルを設定するデモページ