Blazor WASMでTailwind CSSを使う

動機

BlazorにはデフォルトでBootstrapが組み込まれています。
これは古より使われてきたフレームワークですが、ここはBlazor用に構築されたフレームワークを使いたいところ
通常はBootstrapを削除して、MudBlazorを利用しています
しばらく使っていると、同じボタンの形状、細かいデザインについて不満が出てきました
そこでTainwind CSSを使えないかとなりました
結果使うことが出来ました

MudBlazorについて

Blaor用に開発されておりMIT License、Start 5.9kとなかなか好評とみました。
実際Blazorのプロジェクトを作成し、後から自分でMudBlazorを組み込む方法や、テンプレートを使う方法があり、使いやすいフレームワークとなっています。

Tailwind CSSを使う

1. Tailwind CSSをインストール
2. 設定
3. ビルド
   の流れです。

では見ていきましょう。Bootstrapは不要な場合削除しちゃいましょう。

Tailwind CSSをインストール

Blaorのcsprojファイルがあるディレクトリで

npx tailwindcss init

を実行
すると
tailwind.config.jsファイルが作成されます

tailwind.config.jsを開き

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./**/*.{razor,html}'],//ここを変更
  theme: {
    extend: {},
  },
  plugins: [],
}

Stylesディレクトリを作成
その中に
app.css
ファイルを作成し開きます

app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

とします

wwwroot/index.html

<link href="css/app.css" rel="stylesheet" /> <--追加

PowerShellで

npx tailwindcss -i .\Styles\app.css -o .\wwwroot\css\app.css --watch

を実行

このコマンドはtailwind.config.jsのcontentが変更されると/wwwroot/css/app.cssを更新するプログラムです
このコマンドは開発中は実行させておきましょう（時々落ちることがあるので要確認）

実行確認

index.razorを開き

index.razor

@page "/"

<PageTitle>Index</PageTitle>

<h3 class="font-extrabold text-3xl">もろたで</h3>

に変更し実行しましょう

とを表示されるはずです
これでTailwindが適用されました

次にボタン

    <button type="button" class="px-8 py-3 font-semibold rounded-full dark:bg-blue-100 dark:text-gray-800">Rounded</button>

をindex.razorにペーストしましょう
すると

と薄青で角が丸いボタンが設置出来ました
BlazorではボタンなどはComponentとして定義し使いまわすのでいいでしょう。

下記のFlowBiteなどのサイトではコードも記載されておりり、気に入ったものをコピペで使うことが出来ます
FlowBite

    <button type="button" class="relative px-8 py-4 ml-4 overflow-hidden font-semibold rounded dark:bg-gray-100 dark:text-gray-900">
        With banner
        <span class="absolute top-0 right-0 px-5 py-1 text-xs tracki text-center uppercase whitespace-no-wrap origin-bottom-left transform rotate-45 -translate-y-full translate-x-1/3 dark:bg-violet-400">New</span>
    </button>

こういったオシャレボタンを見つけてコピペで使うことが出来ます

Tailwind CSSだけじゃ

ここで問題が
DialogなどのComponentはTailwindにはなく作る必要があるようです
FlowBiteのサイトには例がありますが、別途Javascriptを使う必要があり面倒

現状、MudBlazorとTailwindCSSの両方を使うので良いかなと思っています

Dialogなどの見えないComponentはMudBlaor
ボタンなどの見た目のComponentはTailwind

MudBlazorで作ったDialogにTailwindのボタンを乗せています

参考URL

MANBA UI
FlowBite
@aki426(金田 アキヒロ)さんのページ