Blazor × Tailwind CSSでモダンWeb開発！セットアップから使い方まで完全ガイド

**＜本記事のターゲット層＞**
- 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（シングルページアプリケーション）**を作れるのが最大の特長です。

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

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

---

## 🎨 Tailwind CSSとは？

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

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

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

---

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

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

```bash
dotnet new blazorwasm -n BlazorTailwindSample
cd BlazorTailwindSample
```

### ② Node.js をインストール

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

* Windows: [https://nodejs.org/ja/](https://nodejs.org/ja/)
* macOS: `brew install node`
* 確認: `node -v`, `npm -v`

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

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

### ④ `tailwind.config.js` を調整

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

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

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

`./Styles/tailwind.css` を作成：

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

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

```bash
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>` 内に追記：

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

---

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

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

```razor
<!-- 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>
```

```razor
<!-- 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](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
* **レスポンシブ対応**：`sm:`, `md:`, `lg:` プレフィックスで簡単に対応可能

---

## ✅ まとめ

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

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

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

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

---

## 🔗 参考リンク

* [Tailwind CSS公式サイト](https://tailwindcss.com/)
* [Blazor公式ドキュメント](https://learn.microsoft.com/ja-jp/aspnet/core/blazor/?view=aspnetcore-8.0)

---

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