WOGO Tech blog
🍣

WindowsアプリのUI開発がつらい？ それ、Blazor × Tailwind CSSで解決できます

ruvi
に公開
.NET
C#
Tailwind CSS
Blazor
WPF
tech

はじめまして。WOGOのインターンでエンジニア部門の野口です。
この記事ではWPFのBlazorアプリにTailwindcssをミニマムに導入する方法を解説します。

Tailwindcssを使えば救われるはず、、、

Tailwindcssは今やモダンフロントエンド開発において欠かせない存在となりつつあるユーティリティファーストなCSSフレームワークです。
BlazorはC#と.NETを用いたフロントエンド開発を可能にするMicrosoft製のフレームワークであり、BlazorWebViewはWPF上で動作するWindowsネイティブアプリ用のBlazorです。C#を用いてフロントエンドを構築できるのでアプリケーション開発全体で一貫した言語体系を使用でき認知コストを抑えシームレスな開発が可能になるといううれしさがあります。

TailwindcssをBlazorWebViewに導入することができればWPFを用いたWindowsアプリケーションにおけるUIをWebアプリとほぼ同じ感覚で開発できるようになります。Webフロントエンド開発に慣れ親しんだエンジニアにとって、WPFやBlazorの学習は認知コストが大きく感じられがちです。しかし、使い慣れたTailwindcssが使えるとなれば、心理的な障壁はずっと低くなりより素早いキャッチアップが可能になるはずです。

またこの記事においてはできるだけ外部ツールやパッケージに依存せず複雑なメソッドを組むことなく最低限の構成でTailwindcssを導入する方法を紹介します。

開発環境

  • windows11 x64
  • .NET8
  • IDE
    • Visual Studio 2022 Community Edition
    • Visual Studio 2026 Community Edition
    • Visual Studio Code + C# dev kit
  • NuGetパッケージ
    • Microsoft.AspNetCore.Components.WebView.Wpf　Version="8.0.14"
    • Microsoft.Extensions.DependencyInjection　Version="8.0.1"
  • Tailwind CLI v4.1.18

Tailwindcssの導入方法

導入ロジック

では実際にどの様なロジックでTailwindcssを導入するのでしょうか。基本的にTailwindcssはユーザが作成したスタイルが記述されたファイルを読み取り、それを元にCSSをビルドすることで意図した動作を実現します。これをWPFアプリ内で動作させるための最小構成は
1．スタイルが記述されたファイルを作成する
2．プロジェクトがビルドされる際にTailwindcssにそのファイルをもとにCSSをビルドさせるようにする
3．ビルドされたCSSファイルをスタイルとして認識できるようにする
以上のようになります。これを構成を元に導入方法を解説します。

Tailwind CLIをNode.jsをインストールせずに使用する

Tailwind CLIを使用することでBlazorWebViewにTailwindcssを導入できます。

The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool.[1]

Node.jsをインストールしてnpmを用いた運用が一般的ですが、せっかくC#に統一しようとしているのにもかかわらずNode.jsを導入するなど本末転倒です。そこでTailwind CLIをスタンドアロンの実行ファイルとして使用します。以下で最新版を取得できます。今回はtailwindcss-windows-x64.exeを使用します。
https://github.com/tailwindlabs/tailwindcss/releases/

実際にBlazorWebViewを用いたWPFアプリに導入する

BlazorWebViewを用いたWPFアプリのプロジェクトファイルは大抵の場合以下の様な構成になっています。[2]

FileTree
ProjectFile
├── YourProjectName
│   ├── _Imports.razor
│   ├── App.xaml
│   ├── App.xaml.cs
│   ├── App.razor
│   ├── AssemblyInfo.cs
│   ├── MainWindow.xaml
│   ├── MainWindow.xaml.cs
│   ├── YourProjectName.csproj
│   ├── Pages
│   │   └── Home.razor
│   ├── Styles
│   │   └── app.tailwind.css
│   └── wwwroot
│       ├── css
│       │   └── app.css
│       ├── index.html
│       └── js
│           └── app.js
└── YourProjectName.sln

1.スタイルを記述するファイルを作成する

プロジェクトルートにスタイルを記述しておくファイルを作成します。プロジェクトルートはYourProjectName.csprojのある場所です。例として以下のように配置してみます。ファイル名は任意です。

ProjectFile
└── YourProjectName
    ├── ⋯
    ├── YourProjectName.csproj
    └── Styles
        └── app.tailwind.css

2.プロジェクトがビルドされる際にTailwindcssにCSSをビルドさせるようにする

a.まずはGithubから取得したtailwindcss-windows-x64.exeをプロジェクトルートに配置します。

ProjectFile
└── YourProjectName
    ├── ⋯
    ├── YourProjectName.csproj
    └── tailwindcss-windows-x64.exe

b.次にビルド時にTailwind CLIがCSSをビルドするように.csprojファイルに追記します。

<Project Sdk="Microsoft.NET.Sdk.Razor">
    <!== some other options -->
    <Target Name="TailwindBuild" BeforeTargets="Build">
        <Exec Command="tailwindcss-windows-x64.exe -i ./Styles/app.tailwind.css -o ./wwwroot/css/app.css" Condition="'$(Configuration)' == 'Debug'" />
        <Exec Command="tailwindcss-windows-x64.exe -i ./Styles/app.tailwind.css -o ./wwwroot/css/app.css --minify " Condition="'$(Configuration)' == 'Release'" />
    </Target>
</Project>

これによりビルド時に./Styles/app.tailwind.cssを元に./wwwroot/css/app.cssが作成されるようになります。./wwwroot/cssはテンプレートに存在すると思われますがなければ作成してください。ファイル名、ディレクトリ名ともに任意です。

3．ビルドされたCSSファイルをスタイルとして認識できるようにする

YourProjectName/.wwwroot/index.htmlのヘッダに追記します。

<head>
	<!-- some other headers -->
	<link href="css/app.css" rel="stylesheet" />
</head>

Tips

IntelliSense

以下のものを使用すれば問題なくIntelliSenseを効かせることができます。

  • Visual Studio 2022 (2026でも動作します)
  • Visual Studio Code

問題点:ホットリロードとの兼ね合い

Tailwind --watch

Tailwindcssについてご存じの方であれば--watchは使わないのかと思われる方もいらっしゃると思います。TailwindcssはJIT(Just-in-time)モードが存在し--watchをオプションで付けることで使用できます。JITモードを使用していない状態では新たなスタイルを追加する際いちいちCSSをビルドする必要がありますが、JITモードを使用することでスタイルを設定しているファイル(今回の場合./Styles/app.tailwind.css)の変更だけでなく監視対象に指定されたファイルの新たなスタイルを検出して動的にCSSファイルをリビルドしてくれます。この設定も./Styles/app.tailwind.css等に記述できます。細かい調整ができる、新たなスタイルを気軽に試せるなど様々な利点があります。しかしBlazorのホットリロードと相性があまり良いとは言えません。

ホットリロード

.NET ホット リロードでは、アプリを再起動することなく、アプリの状態を失うことなく、スタイル シートの変更を含むコード変更が実行中のアプリに適用されます。[3]

ホットリロードはBlazorを用いた開発に欠かいない機能の一つですが、前述の通りTailwind --watchとの相性はあまり良くありません。TailwindcssがビルドするCSSファイルの変更をBlazorのホットリロードは感知できないためです。

解決策

1．スタイルの変更を減らす工夫をする

そもそもおおよそのプロジェクトにおいてUIデザインは決まっていることが多いと思われます。そのすべてをしっかりと定義しビルドすればホットリロードとの相性を気にすることなく開発をすることができます。ホットリロードはビルドされたCSSファイルの変更を感知することはできませんがすでに定義されているスタイル間の変更であれば問題なく感知することができます。

2．頑張る

原理的には
1.ビルド時にTailwind --watchを同時に起動させる
2.ホットリロードが発火したらキャッシュをクリアし、新しいCSSファイルを読み直させる
3.アプリ終了時にTailwind --watchを終了
というふうにすればTailwind --watchとホットリロードを共存させられそうです。
これに関しては別の記事で解説したいと思います。

2026.02.03追記　Hot Reload共存記事書きました

こちらもぜひご一読ください。
https://zenn.dev/wogo_techblog/articles/a51dee31b0c90e

最後に

このドキュメントがWindowsアプリのUI開発を学ばんとするエンジニアの一助となれば幸いです。

脚注

  1. Tailwind公式ドキュメント ↩︎

  2. Microsoft learn. "Windows Presentation Foundation (WPF) の Blazor アプリを構築する" ↩︎

  3. Microsoft公式リファレンス ↩︎

WOGO Tech blog
WOGO Tech blog

株式会社WOGOのエンジニア有志チームによる記事です。

Discussion