TailwindCSS の data 属性

例えば、data-active=true 属性を持つ要素のみにスタイルを適用する場合には、以下のようなクラスを書きます。

<!-- data-active=true を持つ要素では背景色が青になる -->
<div
  class="data[active=true]:bg-blue-500"
  data-active="true"
></div>

JavaScript で data 属性を操作することで、動的にスタイルを変更する用途でよく使われます。

Radix UI や React Aria Components などの多くのヘッドレス UI コンポーネントライブラリの実装では data 属性が公開されています。

data 属性を使って、例えばアコーディオンが開いている場合のみ data-state=open に設定されるので、アコーディオンの状態に応じてスタイルを適用するといったことが可能です。