Tailwind CSSで任意のclassが付与された時にスタイルを適用する

Tailwind CSSを使って、「is-current」のような任意のclassが付与された際にスタイルを適用する方法をメモ。
使用環境はAastro 5.16.0 / Tailwind CSS 4.1.17になります。

サンプルコード

例として.is-currentが付与された時にスタイルを設定してみます。

<a
  href=""
  class="
    [&.is-current]:text-red-700
  "
>not current</a>
<a
  href=""
  class="
    is-current
    [&.is-current]:text-red-700
  "
>current</a>

これでis-currentが付与された場合にのみ指定したスタイルが適用されました。
任意のclass付与時にスタイルを適用するデモページ