家計簿アプリを作る #10：Tailwind CSS v4 + Flowbite でUI スタイリング

家計簿アプリ作成シリーズの第10回です。今回は Tailwind CSS v4 と Flowbite Svelte を導入して UI をスタイリングします。

Flowbite を選んだ理由

Tailwind CSS でスタイリングする際、公式の UI コンポーネントサンプルとして Tailwind CSS Plus があります。ただし有料のため、無料で使えるコンポーネントライブラリを探した結果 Flowbite を選択しました。Flowbite は仕事でも使っているので使い慣れているというのも理由のひとつです。

UI スタイリングで感じたこと

UI の見た目はこだわり始めると延々と時間を使ってしまいます。「どこで止めるか」の判断が難しく、今回は機能実装の妨げにならない程度のスタイリングにとどめることにしました。

Tailwind CSS v4 + Flowbite Svelte のセットアップ

Step 1：Tailwind CSS のインストール

npx sv add tailwindcss

インストールされるバージョンは Tailwind CSS v4 です。

npm ls tailwindcss
# tailwindcss@4.3.0

Step 2：Flowbite Svelte のインストール

npm install flowbite flowbite-svelte

Step 3：app.css の設定

src/app.css に以下を追加します。

@import "tailwindcss";
@import "flowbite/src/themes/default.css";
@plugin "flowbite/plugin";
@source "../node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}";

各行の役割：

ハマりポイント①：Tailwind v4 は tailwind.config.js を使わない

Tailwind v3 では tailwind.config.js でコンテンツのスキャン対象やプラグインを設定していましたが、Tailwind v4 では tailwind.config.js は不要です。すべて app.css 内の CSS ベースの設定で行います。

v3 の書き方（使わない）：

// tailwind.config.js（v3 の方法）
module.exports = {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  plugins: [require('flowbite/plugin')]
}

v4 の書き方（app.css で設定）：

@import "tailwindcss";
@plugin "flowbite/plugin";
@source "../node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}";

ハマりポイント②：Flowbite のデザイントークンが適用されない

Flowbite Svelte v1 のコンポーネントやサンプルコードでは、text-heading・bg-brand・bg-neutral-secondary-medium など、標準の Tailwind にはないクラスが使われています。

これらは Flowbite 独自のデザイントークンで、flowbite/src/themes/default.css で CSS 変数として定義されています。このファイルを @import しないとスタイルが一切適用されず、素の HTML のような見た目になってしまいます。

/* これが必要 */
@import "flowbite/src/themes/default.css";

ハマりポイント③：@source のパスの typo

app.css の @source に誤ったパスを書いてしまい、Flowbite Svelte のクラスが Tailwind のスキャン対象にならないことがありました。

/* ❌ 誤り */
@source "app.html../node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}";

/* ✅ 正しい */
@source "../node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}";

Flexbox コンテナ内での幅の扱い

Flowbite のサンプルコードをそのまま貼り付けると、flex flex-col の中で入力フィールドが縮んで見えることがあります。

<div class="flex flex-col px-6 py-12">
  <form class="max-w-sm mx-auto">  <!-- ❌ w-full がないと縮む -->

Flexbox の子要素はデフォルトでコンテンツ幅に縮むため、w-full を追加する必要があります。

<form class="max-w-sm mx-auto w-full">  <!-- ✅ -->

まとめ

次回は収支の集計・グラフ表示を実装します。