「headless-ui」タグのついた5記事

Base UI の Dialog を Tailwind CSS で仕上げ、Storybook に載せ、jsdom と Storybook と実ブラウザの 3 層でテストするまでを通す全 9 章のガイド。状態管理や ARIA のコードを自分で書かずに済ませる分け方と、その分け方がテストの書き方をどう変えるかを扱います。

Base UI の Dialog と Tailwind CSS で、お知らせ用のダイアログを実装します。パーツごとの役割、className へ直接クラスを渡す書き方、data 属性による開閉の遷移、useState と ARIA の属性を書かずに済む理由を順に見ます。

モーダルを自作すると抱える仕事を数え、そのうちどこをヘッドレス UI に渡せるかを見ます。Base UI がどういうライブラリで、Tailwind CSS と組み合わせると何が楽になり、何が手元に残るかを整理します。

Base UI、Tailwind CSS、Storybook、テストの 4 つが何を受け持ったかを振り返ります。同じ分け方を、Zod のスキーマで検証するフォームと、TanStack Query で取得したデータを props で渡す構成に広げ、通信を伴う部分をどこで差し替えるかを整理します。

Base UI が受け持つ振る舞いと、Tailwind CSS が受け持つ見た目の境界を、実際に DOM へ出る属性から確かめます。フォーカスの閉じ込め、開閉の状態を伝える data 属性、その属性を Tailwind CSS の variant で受ける書き方を扱います。