＜本記事のターゲット層＞
- 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 ❤️ やストックをお願いします！
また、コメントでの質問も歓迎です🙌