Headless UI + Tailwind CSS で Twitter 風のドロワーを作ってみた

Headless UI + Tailwind CSS を組み合わせてドロワーを楽に実装できたので紹介します。 以下のような Twitter っぽいのドロワーを作成しました。 Headless UI とは Headless UI はスタイルを排除したコンポーネント集で、Tailwind CSS と相性がいいとのことです。 スタイルを排除した設計 各コンポーネントのスタイルを切り替えるタイミングを抽象化してくれていて、タイミングごとに適用したいスタイルを prop で渡す設計になっています。 以下のようなイメージです。 <SomeHeadlessUIComponent tapDown="tapDownStyleClass" // <= タップ開始時のスタイル tapUp="tapUpStyleClass" // <= タップ終了時のスタイル /> このような設計になっているため、クラスを使用し