Next.js で Tailwind UI を使用するときにハマった話

Next.js x TypeScript x TailwindCss の構成で開発をする人も増えていますよね。TailwindCssはBootStrapと違ってTemplateを与えるものではなくCSSコーディングを不要にモダンなWebサイトを作るCSSフレームワークと理解しています。そう入ってもTemplateが欲しいしなるべく公式っぽいものを使いたいので、公式ドキュメントでも推奨されている Tailwind UI を使います。

https://tailwindui.com/preview

2022.6.12 追記

Tailwind CSS の v3 がでたり、Next.js も v12 がでたりとアップデートが激しくなってきた。Tailwind UI のReactコードにはjsコードがなくなっているようで、そのままコピペしてもポップアップメニューが起動しなくなり、以下のようなエラーがコンソールに出たりした。

"OnClick" was passed to <Link> with href of /indexRequest but "legacyBehavior" was set. The legacy behavior requires onClick be set on the child of next/link
eval

自分の場合は yarn add @headlessui/react @heroicons/react してやると動くようになった。Tailwind CSS v3 は無理にアップデートするようなものではないし、結構 v2 からの移行だと必要な作業がありそうだったので今回はパス。しかし新しいCSS名が使えなかったりするのは早めにアップグレードするのがよさそう。

HTMLではなくReactに切り替えてコードをコピーしよう

これのHeader Nav Menuのドロップダウンやハンバーガーの開閉が動かなかったのでハマりましたが、結論、コピーするコードをReactではなくHTMLのままコピーしていたのでした。「REQIRES JS」という表記があるのは「これはTailwindCSSが適用されるHTMLのコードだから、JSは自分で準備してね」って意味と推察される。Next.js（React）なら、コードの下の方にJSも用意されているのでそのままコピペしたら動きます。

tailwindUIとheroiconsをインストール

ドキュメントに書いてあるけど、TailwindCSS以外にも依存しているtailwindUIとheroicons,さらにフォントファミリーInterをインストールや読み込みしてあげる必要がある。

https://tailwindui.com/documentation