＜本記事のターゲット層＞

BlazorでTailwindCSSを使いたい人
軽量CSSフレームワークを実装したいCShaper

Blazorを使ってC#だけでWebアプリが作れる時代。
でも、**見た目CSS)どうするの？**という疑問、ありますよね？

今回は、CSSフレームワークとして人気の高い Tailwind CSS を、Blazorアプリ（WebAssembly）に導入する手順と活用例を、初心者にもわかりやすく解説します。

✅ この記事でわかること

Blazorとは何か
Tailwind CSSとは何か
Blazor WebAssemblyプロジェクトにTailwind CSSを導入する手順
Tailwind CSSを使ったコンポーネントのスタイリング例

🧱 Blazorとは？

Blazorは、Microsoft製のフレームワークで、**C#だけでSPA（シングルページアプリケーション）**を作れるのが最大の特長です。

Blazor Server → サーバーサイドでレンダリング（SignalR使用）  
Blazor WebAssembly → クライアント側でC#が動く（完全SPA）

フロントエンドにJavaScript不要なため、C#しか知らないエンジニアでもWebアプリ開発が可能です。

🎨 Tailwind CSSとは？

Tailwind CSSは、ユーティリティファーストなCSSフレームワークです。
使いたい機能（余白、色、フォントなど）をクラス名で直接記述することで、HTMLにそのままデザインを当てられます。

<div class="bg-blue-500 text-white p-4 rounded shadow">
  Hello Tailwind!
</div>

既存のBootstrapなどと違い、自分のデザインを素早くコントロールできるのが魅力です。

🚀 Blazor × Tailwind CSS セットアップ手順

① Blazor WebAssembly プロジェクトを作成

dotnet new blazorwasm -n BlazorTailwindSample
cd BlazorTailwindSample

② Node.js をインストール

Tailwind CSSはPostCSSなどのツールを使うため、Node.jsが必要です。

Windows: https://nodejs.org/ja/
macOS: brew install node
確認: node -v, npm -v

③ Tailwind CSS 関連パッケージをインストール

npm init -y
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

④ `tailwind.config.js` を調整

BlazorのHTML（.razorファイル内の要素）も対象にするため、以下のように設定：

module.exports = {
  content: [
    "./wwwroot/index.html",
    "./**/*.razor",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

⑤ CSSファイルを作成し、Tailwindディレクティブを記述

./Styles/tailwind.css を作成：

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

⑥ Tailwind CSSをビルドして `wwwroot` に出力

npx tailwindcss -i ./Styles/tailwind.css -o ./wwwroot/css/site.css --watch

上記で wwwroot/css/site.css が生成されます。

⑦ `_Host.cshtml` または `index.html` にCSSを読み込み

wwwroot/index.html を開き、以下を <head> 内に追記：

<link href="css/site.css" rel="stylesheet">

💡 Tailwind CSSの使用例（Blazorコンポーネント）

たとえば、以下のような簡易コンポーネントもTailwindで整えられます：

<!-- Components/Alert.razor -->
<div class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 my-2 rounded">
    <strong>注意:</strong> Tailwind CSSが適用されています！
</div>

<!-- Pages/Index.razor -->
<h1 class="text-3xl font-bold underline text-center">ようこそ Blazor × Tailwind CSS</h1>
<Alert />

🛠 開発を効率化するTips

watchモードでCSS自動再生成：--watch を常時有効にする
VS Code拡張機能：Tailwind CSS IntelliSense
レスポンシブ対応：sm:, md:, lg: プレフィックスで簡単に対応可能

✅ まとめ

Blazor × Tailwind CSS の組み合わせは、C#中心の開発者がフロントエンドの美しさにも手を出せる強力な選択肢です。

技術	特長
Blazor	C#でSPA開発。JavaScriptほぼ不要
Tailwind CSS	クラスで直感的なスタイル指定。レスポンシブも簡単

以下のようなユースケースにおすすめです：

内製ツールや業務システムをC#で統一したい
UIを洗練させたいがBootstrapは嫌
コーディング速度と見た目の良さを両立したい

🔗 参考リンク

この記事が役立ったら LGTM ❤️ やストックをお願いします！
また、コメントでの質問も歓迎です🙌