Blazor Web App（Auto）与Tailwind样式异常问题求助

• 检查Client端Tailwind配置的文件扫描范围
  确保Client端的tailwind.config.js里的content数组覆盖了Client端所有需要生成样式的文件路径，示例配置如下：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: [
      "./**/*.{razor,html,cshtml}",
      "./Pages/**/*.{razor,html,cshtml}",
      "./Shared/**/*.{razor,html,cshtml}"
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

  多数情况是Client端配置未正确扫描自身组件文件，导致Tailwind未生成新的样式类。

• 确认Client端样式文件的引入路径
  在Client端的布局文件（如_Layout.cshtml或App.razor）中，要确保引入的是Client端专属的tailwind-client.css，而非Server端样式文件，示例代码：

  <link href="~/tailwind-client.css" rel="stylesheet" />
  

• 配置独立的Client端Tailwind构建命令
  在项目的package.json中添加针对Client端的编译脚本，确保两端样式独立构建：

  "scripts": {
    "build:tailwind:server": "tailwindcss -i ./Styles/tailwind.server.css -o ./wwwroot/css/tailwind.server.css --watch",
    "build:tailwind:client": "tailwindcss -i ./Client/Styles/tailwind-client.css -o ./Client/wwwroot/css/tailwind-client.css --watch"
  }
  

  运行时需同时启动两个监听命令，或分别完成Server与Client端的样式编译。

• 清理缓存并重新构建项目
  浏览器缓存或项目构建缓存可能导致新样式不生效，可执行以下操作：

  • 用Ctrl+Shift+R强制刷新浏览器，清理缓存
  • 删除项目的bin和obj文件夹，重新编译整个解决方案

内容的提问来源于stack exchange，提问作者Matjaž Reberc