Zenn
🐈

Tailwindでhasと子孫セレクタの組み合わせ

2024/02/15に公開
CSS
React
Tailwind CSS
tech

はじめに

textareがフォーカスしている時は兄要素のbuttonを非表示にしたいと思いつつ、Tailwindではどう書くんだ？？となり色々試行錯誤した結果、実現できたので共有したいと思います。

問題

cssでいう↓のようなスタイルをTailwindで指定したかった。
※他のユースケースが思い浮かばなかったので業務で使用した物を例にしています。

div:has(textarea:focus) > button {
  display: none
}

解決方法

[&>button]:has-[textarea:focus]:hidden
この記述で再現できました！

ex)

<div className='[&>button]:has-[textarea:focus]:hidden'>
  <button type="button">button</button>
  <textarea {...props} />
</div>

おわりに

本当はrefやらcssやらいじって再現するつもりだったけど、意外とTailwindで指定できて器用さにびっくりしました。

参考

Discussion