TailwindCSS v3.4からhasが利用できるようになった
2024-01-11
11 months ago
開発環境
- next 14.0.4
- tailwindcss 3.4.1
- postcss 8.4.33
- autoprefixer 10.4.16
前提
tailwindのバージョンは3.4以上が必要です。
本題
これまで、親子関係のある要素間で、子要素の選択状態によって親要素のスタイルを変更できませんでした。
そのため、コンポーネントの中で選択された値などを管理(stateやpropsなど)して実装する必要がありました。
しかし、今回のバージョンアップで子要素の選択状態をhas-を利用することでシンプルに実現できるようになりました。
また、CSSの:has()疑似クラスは一部ブラウザのサポートがまだでしたが、Firefox 121でサポートされ、これで:has()疑似クラスがすべてのブラウザにサポートされました。
具体的な用途
例えば、以下のようなlabel要素内に画像やテキスト、チェックボックスがあるようなUIの場合、選択時に背景色を変更したいニーズがたまにあります。
実装例
{
options.map((option) => (
<label
key={option.id}
className={`
has-[:checked]:bg-gray-500 has-[:checked]:ring-1 has-[:checked]:ring-gray-700
flex flex-col items-center justify-around gap-2 rounded-2xl px-2 py-1
hover:cursor-pointer hover:bg-gray-300 hover:ring-1 hover:ring-gray-400
`}
>
<Image
src={option.filePath}
height={56}
width={56}
alt="選択肢画像"
className="rounded-full object-contain"
/>
<input
type="checkbox"
id={option.id}
value={option.id}
/>
{option.label && <span>{option.label}</span>}
</label>
));
}上記の実装例では、label配下のinput要素のチェック状態によって、親要素であるlabelのスタイルを変更しています。（has-[:checked]）
さいごに
CSSのみで完結しているので、実装がシンプルになりました。
今回紹介したhas以外にもv3.4では多くの機能追加があります。
利用できそうなものが他にもあったので、こちらも随時アップデートしていきたいです。