MAUI Blazor构建后Tailwind CSS未生效及热重载执行脚本问题

一、构建后样式未即时加载的问题 #

当前使用PostBuildEvent生成CSS，会导致生成的文件晚于MAUI资源复制的时机，新CSS未被同步到运行时目录，因此重启应用才会读取到最新文件。可通过以下两种方式解决：

1. 调整MSBuild Target执行时机 #

将生成CSS的动作提前到构建开始前执行，确保构建过程能把最新的CSS纳入资源管理。修改项目文件中的Target：

<Target Name="BuildCSS" BeforeTargets="BeforeBuild">
    <Exec Command="npm run buildcss" />
</Target>

2. 强制同步CSS文件到输出目录 #

如果需要保留PostBuild时机，可添加文件复制任务，确保生成的CSS被复制到应用运行的输出目录：

<Target Name="BuildCSS" AfterTargets="PostBuildEvent">
    <Exec Command="npm run buildcss" />
    <Copy SourceFiles="wwwroot/css/custom-tailwind.min.css" 
          DestinationFiles="$(OutDir)wwwroot/css/custom-tailwind.min.css" 
          OverwriteReadOnlyFiles="true" />
</Target>

二、热重载时自动更新Tailwind CSS #

要实现热重载时自动重新生成CSS，可结合Tailwind的监听模式和DotNet Watch：

1. 添加Tailwind监听脚本 #

在package.json中新增watch命令：

"scripts": {
    "buildcss": "tailwindcss -o wwwroot/css/custom-tailwind.min.css --minify",
    "watchcss": "tailwindcss -o wwwroot/css/custom-tailwind.min.css --watch"
}

2. 配置DotNet Watch同时启动监听 #

在项目文件中添加Target，让DotNet Watch启动时自动运行npm run watchcss：

<Target Name="StartTailwindWatch" BeforeTargets="DotNetWatchStart">
    <Exec Command="start npm run watchcss" />
</Target>

启动dotnet watch时，会同时启动Tailwind的监听进程，当Razor文件或Tailwind配置文件变化时，会自动重新生成CSS，MAUI Blazor的热重载会自动加载新样式。

替代方案：让DotNet Watch监听CSS生成相关文件 #

在项目文件中添加要监听的文件，确保DotNet Watch检测到变化时触发重载：

<ItemGroup>
    <Watch Include="tailwind.config.js" />
    <Watch Include="**/*.razor" />
    <Watch Include="**/*.cshtml" />
</ItemGroup>

配合Tailwind的watch模式，就能实现修改组件后自动更新CSS并触发热重载。

内容的提问来源于stack exchange，提问作者Xerillio