Tailwind CSSは基本的には1つのCSSプロパティが割り当てられたclass名を利用することでスタイリングを行っていきます。

ただし、classが用意されていない場合はarbitrary valuesという機能を利用することで任意の値を指定することも可能です。

arbitrary values

arbitraryは「任意」という意味になるのでarbitrary valuesでは任意の値が指定可能です。

例えば以下のように [ と ] の間に任意の値を指定することでclassがあらかじめ用意されていないCSSプロパティの値も利用することが可能になります。

<div class="top-[117px]">
  <!-- ... -->
</div>

更にTailwind CSSにはarbitrary variantsという機能が用意されておりセレクタに対しても任意の値が指定可能になります。

arbitrary variants

arbitrary variantsはclassの指定の前に `[条件]:` という記述を追加することでセレクタの条件を追加することができます。

条件では自身の&としてCSSセレクタで条件を指定できます。

JSなどで条件が切り替わる場合のスタイルが非常にやりやすくなります。

自身の状態によってスタイルを変更する

例えば以下のように指定を行うとclass属性に`is-active`がある場合にのみテキストのカラーが赤色になります。

<p class="[&.is-active]:text-red-500">テキスト</p>

以下のように指定を行うとdata属性「data-active」がある場合にのみテキストのカラーが赤色になります。

<p class="[&[data-error]]:text-red-500" data-active>テキスト</p>

親要素の状態によってスタイルを変更する

親要素の状態によってスタイルを切り替える場合には &の前に子セレクタ (>) を書きその前に条件のセレクタを記述します。

次の例では親要素にclass属性「is-active」がある場合にのみテキストのカラーが赤色になります。

<div class="is-active">
  <p class="[.is-active>&]:text-red-500">テキスト</p>
</div>

先祖要素の状態によってスタイルを変更する

先祖要素の状態によってスタイルを切り替えたい場合は子孫セレクタを利用します。

arbitrary variantsでは子孫セレクタはアンダースコア ( _ ) で記述しなくては行けないので注意が必要です。

<div class="is-active">
  <div>
    <p class="[.is-active_&]:text-red-500">テキスト</p>
  </div>
</div>

arbitrary variantsは状態によってのスタイルの切り替えだけではなく子セレクタや子孫セレクタとしてセレクタ記述を行うこともできます。

子セレクタとして利用

以下のように記述すると子セレクタとしてli要素のテキストのカラーが赤色になる指定が可能です。

<ul class="[&>li]:text-red-500">
  <li>list1</li>
  <li>list2</li>
  <li>list3</li>
</ul>

子孫セレクタとして利用

以下のように記述を行うとspan要素が指定された数値のみ赤色になります。

<ul class="[&_span]:text-red-500">
  <li>list<span>1</span></li>
  <li>list<span>2</span></li>
  <li>list<span>3</span></li>
</ul>

子セレクタや子孫セレクタは共通化目的では利用がしやすいのですが過度に利用するとclass指定の肥大化を招きやすいので利用時のさじ加減が必要でしょう。

このようにTailwind CSSのarbitrary variantsを利用すると条件や状態が複雑なスタイルも可能になるので試してみてください。

参考: Handling Hover, Focus, and Other States – Tailwind CSS