😄

TailwindCSSで現在の要素が~のときだけクラスを適用する指定の仕方のメモ

2025/03/01に公開

あまり利用する機会はないと思うが、現在の要素が例えばボタンのときのみクラスを指定したいときは以下のように書くと適用される

&が自身を表し、isで指定の要素に当てはまるかどうかチェックする

isには複数の要素を指定し、どれか１つ当てはまるのがあれば適用みたいなこともできる

<button
  className="[&:is(button)]:text-red-500"
  className="[&:is(button,div)]:text-red-500"
  >
  ぼったん
</button>

参考

間違っていることがあれば、コメントに書いていただけると幸いです。
よろしくお願いいたします。