RemixにFlowbiteを導入してみた
概要
Remix + Tailwind CSSで簡単なTODOアプリを作成中、
Flowbiteを導入した手順の備忘録です。
Flowbiteとは
Flowbiteは、Tailwind CSSフレームワークに基づくUIコンポーネントのオープンソースライブラリです。
ダークモードのサポート、Figma、テンプレートなどを備えたユーティリティファーストで、無料の範囲でも結構な種類のデザインがあったので選びました。
Flowbiteのinstall手順
Remixプロジェクトでのinstall手順があったので、そちらを見ながら進めます。
今回は開発途中のプロジェクトに導入する場合なので、プロジェクトの作成などは省きます。
公式の手順でremix.configに追記する箇所などがありますが、vite.configになったみたいなのでこちらも省きます。
RemixはViteを使用してアプリケーションをコンパイルします
ということで、Flowbiteのinstallから始めました。
Reactに対応したFlowbite-Reactをinstallするようです。
pnpm install flowbite flowbite-react --save
この後tailwind.config.tsにpluginなどを追記すれば、公式の手順では使えるはず。
スタイルが当たらない問題
しかし、試してみるとスタイルが当たらない問題が発生。
そこで、GitHubでFlowbite-ReactのRemix+viteでのtemlateを確認してみました。
自身のpackage.jsonと見比べると、公式にはflowbite-reactだけが入っています。
flowbiteが余計だったのでしょうか。
公式に合わせてflowbite消してみました。
pnpm rm flowbite
internal server error起きた
[vite] Internal server error: [postcss] Package subpath './plugin' is not defined by "exports" in…(後略)
pathがどうとかで怒られたので、tailwind.configのpluginの箇所、Flowbite-ReactのRemix+viteでのtemlateのtailwind.configを真似てみました。
これで無事にスタイル反映されました。
まとめ
手間取ったけど反映されてよかった。
Discussion