【続編】WindowsアプリUI開発はもうつらくない！ Blazor × Tailwind CSS完全版

YourProject/
├── TailwindProcess.cs
├── HotReloadHandler.cs
├── CssHotReloadSync.razor
├── App.xaml
├── App.xaml.cs
├── App.razor
├── YourProject.csproj
├── wwwroot/
│   ├── index.html
│   └── css
...

using System.Diagnostics;
using System.IO;
using System.Text;

public class TailwindProcess
{
    private Process? _process;

    public void Start()
    {
        // プロジェクトルートを取得
        string projectRoot = FindProjectRoot();        
        if (string.IsNullOrEmpty(projectRoot))
        {
            Debug.WriteLine("[Tailwind] Error: Project root not found.");
            return;
        }
        
        //ProjectRoot配下のExternalToolsフォルダにtailwindcss-windows-x64.exeがある想定
        var tailwindExe = Path.Combine(projectRoot,"ExternalTools\\tailwindcss-windows-x64.exe");
        // tailwindcssの実行ファイルが存在するか確認,なければ終了。ディレクトリ名は適宜変更してください
        if (!File.Exists(tailwindExe))
        {
            Debug.WriteLine($"[Tailwind] Error: {tailwindExe} not found.");
            return;
        }

        _process = new Process
        {
            StartInfo = new ProcessStartInfo
            {
                FileName = tailwindExe,
                Arguments = "-i Styles/app.tailwind.css -o wwwroot/css/app.css --watch",
                RedirectStandardOutput = true,
                RedirectStandardError = true,
                StandardOutputEncoding = Encoding.UTF8,//Tailwindの出力が文字化けする場合があるのでUTF8に設定
                StandardErrorEncoding = Encoding.UTF8,//同上
                UseShellExecute = false,
                CreateNoWindow = true,
                WorkingDirectory = projectRoot
            }
        };

        _process.OutputDataReceived += (s, e) => { if (e.Data != null) Debug.WriteLine($"[Tailwind][out] {e.Data}"); };
        _process.ErrorDataReceived += (s, e) => { if (e.Data != null) Debug.WriteLine($"[Tailwind][err] {e.Data}"); };
        //Tailwind CLIのログはerrに流れるので注意    

        try
        {
            _process.Start();
            _process.BeginOutputReadLine();
            _process.BeginErrorReadLine();
            Debug.WriteLine("[Tailwind] Watcher process started.");
        }
        catch (Exception ex)
        {
            Debug.WriteLine($"[Tailwind] Failed to start: {ex.Message}");
        }
    }

    public void Stop(){
        if (_process != null && !_process.HasExited){
            try{
                _process.Kill(true);
                Debug.WriteLine("[Tailwind] Watcher process stopped.");
            }
            catch { /* 特に何もなければ無視 */ }
        }
    }

    //ProjectRootを探すヘルパーメソッド
    private string FindProjectRoot(){
        var directoryInfo = new DirectoryInfo(AppDomain.CurrentDomain.BaseDirectory);
        while (directoryInfo != null){
            if (File.Exists(Path.Combine(directoryInfo.FullName, "YourProject.csproj"))){
                return directoryInfo.FullName;
            }
            directoryInfo = directoryInfo.Parent;
        }
        return string.Empty;
    }
}

//Projectのnamespace内
    public partial class App : Application
    {
        // Tailwind管理用インスタンス
        private TailwindProcess? _tailwindProcess;

        protected override void OnStartup(StartupEventArgs e)
        {
            base.OnStartup(e);

            // デバッグ実行時のみTailwindのWatchを開始
#if DEBUG
            _tailwindProcess = new TailwindProcess();
            _tailwindProcess.Start();
#endif
        }
        protected override void OnExit(ExitEventArgs e)
        {
            // アプリ終了時にTailwindのプロセスも止める
#if DEBUG
            _tailwindProcess?.Stop();
#endif
            base.OnExit(e);
        }
    }

using System.Reflection.Metadata;

// MetadataUpdateHandlerAttributeの使用Attributeは省略可
[assembly: MetadataUpdateHandler(typeof(MyBlazor_WPFFrame.HotReloadHandler))]

namespace YourProject
{
    public static class HotReloadHandler
    {
        // UI側（Razorコンポーネント）に通知を送るためのイベント
        public static event Action? OnHotReload;

        // ホットリロードが発生した瞬間にVSから呼ばれるメソッド
        public static void UpdateApplication(Type[]? updatedTypes)
        {
            // イベントを発火させる
            OnHotReload?.Invoke();
        }

        public static void ClearCache(Type[]? updatedTypes)
        {
            // キャッシュクリアが必要なら
        }
    }
}

@using System.Diagnostics
@inject IJSRuntime JS
@implements IDisposable

@code {
    // Tailwindが出力するファイル名（index.htmlで読み込んでいる名前）
    private const string CssFileName = "css/app.css"; // ← 環境に合わせて修正

    protected override void OnInitialized()
    {
        // 静的イベント(HotReloadHandlerで作ったイベント)に登録
        HotReloadHandler.OnHotReload += HandleHotReload;
    }

    public void Dispose()
    {
        // メモリリーク防止のため登録解除
        HotReloadHandler.OnHotReload -= HandleHotReload;
    }

    private async void HandleHotReload()
    {
        try
        {
            // ホットリロードのイベントはUIスレッド外から来る可能性があるため、InvokeAsyncでラップ
            await InvokeAsync(async () =>
            {
                // Tailwindのビルドが完了するのを少しだけ待つ猶予（必要なら調整,おおよそ100msで終わるとは思うが、、、）
                await Task.Delay(100); 

                // JS関数を呼び出してCSSをリフレッシュ
                await JS.InvokeVoidAsync("reloadCss", CssFileName);
                
                // デバッグ出力（VSorVScodeの出力ウィンドウで確認用）
                Debug.WriteLine("[Blazor] Hot Reload event received. CSS refreshed.");
            });
        }
        catch (Exception ex)
        {
            Debug.WriteLine($"[Blazor] Error refreshing CSS: {ex.Message}");
        }
    }
}

@* 追記 *@
#if DEBUG
    <CssHotReloadSync />
#endif

<!-- any other tags-->
<head>
    <!-- any other tags-->
    <link href="css/app.css" rel="stylesheet" />
    <script>
    window.reloadCss = function (cssFileName) {
        var links = document.getElementsByTagName("link");
        for (var i = 0; i < links.length; i++) {
            var link = links[i];
            // cssFileNameが含まれるlinkタグを探して更新
            if (link.rel === "stylesheet" && link.href.includes(cssFileName)) {
                // クエリパラメータを付け替えてキャッシュ回避
                var newUrl = link.href.split('?')[0] + "?v=" + new Date().getTime();
                link.href = newUrl;
                console.log("[JS] CSS reloaded: " + newUrl);
                return;
            }
        }
    };
    </script>
<head>

<Project Sdk="Microsoft.NET.Sdk.Razor">
        <!== some other options -->
	<Target Name="DownloadTailwindCLI" BeforeTargets="Build">
		<PropertyGroup>
			<ToolUrl><!--最新バージョンです-->
				https://github.com/tailwindlabs/tailwindcss/releases/download/v4.1.18/tailwindcss-windows-x64.exe</ToolUrl>
			<ToolDir>$(ProjectDir)ExternalTools\</ToolDir>
			<ToolPath>$(ToolDir)tailwindcss-windows-x64.exe</ToolPath>
		</PropertyGroup>
                <!--ディレクトリないなら作成-->
		<MakeDir Directories="$(ToolDir)" Condition="!Exists('$(ToolDir)')" />

		<DownloadFile SourceUrl="$(ToolUrl)" DestinationFolder="$(ToolDir)"
			Condition="!Exists('$(ToolPath)')">
			<Output TaskParameter="DownloadedFile" ItemName="Content" />
		</DownloadFile>

		<Message Text="External tool downloaded to $(ToolPath)" Importance="high"
			Condition="!Exists('$(ToolPath)')" />
	</Target>

	<Target Name="TailwindBuild" BeforeTargets="Build">
		<Exec Command="$(ToolPath) -i ./Styles/app.tailwind.css -o ./wwwroot/css/app.css"
			Condition="'$(Configuration)' == 'Debug'" />
		<Exec Command="$(ToolPath) -i ./Styles/app.tailwind.css -o ./wwwroot/css/app.css --minify "
			Condition="'$(Configuration)' == 'Release'" />
	</Target>
</Project>

<Project Sdk="Microsoft.NET.Sdk.Razor">
        <!== some other options -->
        <Target Name="DownloadDaisyUI" BeforeTargets="Build">
		<PropertyGroup>
			<DaisyUiUrl>https://github.com/saadeghi/daisyui/releases/latest/download/daisyui.mjs</DaisyUiUrl>
			<DaisyUiThemeUrl>https://github.com/saadeghi/daisyui/releases/latest/download/daisyui-theme.mjs</DaisyUiThemeUrl>
			<ToolDir>$(ProjectDir)Styles\</ToolDir>
			<DaisyUiPath>$(ToolDir)daisyui.mjs</DaisyUiPath>
			<DaisyUiThemePath>$(ToolDir)daisyui-theme.mjs</DaisyUiThemePath>
		</PropertyGroup>

		<MakeDir Directories="$(ToolDir)" Condition="!Exists('$(ToolDir)')" />

		<DownloadFile SourceUrl="$(DaisyUiUrl)" DestinationFolder="$(ToolDir)"
			Condition="!Exists('$(DaisyUiPath)')">
			<Output TaskParameter="DownloadedFile" ItemName="Content" />
		</DownloadFile>

		<Message Text="daisyUI mjs downloaded to $(DaisyUiPath)" Importance="high"
			Condition="!Exists('$(DaisyUiPath)')" />

		<DownloadFile SourceUrl="$(DaisyUiThemeUrl)" DestinationFolder="$(ToolDir)"
			Condition="!Exists('$(DaisyUiThemePath)')">
			<Output TaskParameter="DownloadedFile" ItemName="Content" />
		</DownloadFile>

		<Message Text="daisyUI theme mjs downloaded to $(DaisyUiThemePath)" Importance="high"
			Condition="!Exists('$(DaisyUiThemePath)')" />
	</Target>
<Project>

@import "tailwindcss";

@source not "./tailwindcss";
/* Tailwind CLIの相対パス */
@source not "./daisyui{,*}.mjs";
/* daisy UIの相対パス(以下同じ) */

@plugin "./daisyui.mjs"; 
@plugin "./daisyui-theme.mjs"{
  /* custom theme here */
}