如何让TailwindCSS CLI包含Blazor Server隔离组件的CSS？

你的问题核心是Tailwind CLI未处理Blazor隔离CSS文件中的自定义类和@apply指令，同时Blazor的CSS隔离机制会自动修改类名导致样式不生效，具体解决步骤如下：

1. 调整Tailwind配置与主CSS文件 #

• 创建主CSS文件（比如wwwroot/css/tailwind.css），内容包含Tailwind核心层，并导入所有Blazor隔离CSS文件：

@tailwind base;
@tailwind components;
@tailwind utilities;

/* 导入Pages和Shared目录下的所有隔离CSS */
@import "../Pages/**/*.razor.css";
@import "../Shared/**/*.razor.css";

• 修改tailwind.config.js，确保content覆盖所有razor文件（用于扫描HTML中的类名），同时保留CSS文件路径以扫描其中的类选择器：

module.exports = {
    content: [
        "./Shared/*.{html,razor,cshtml}",
        "./Pages/*.{html,razor,cshtml}",
        "./Shared/*.css",
        "./Pages/*.css"
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

2. 禁用Blazor自动CSS隔离处理 #

Blazor默认会给隔离CSS中的类添加作用域后缀（如.from-iso[b-xxxxxx]），这会和Tailwind生成的原始类名冲突，需要在项目的.csproj文件中禁用自动隔离：

<PropertyGroup>
  <!-- 禁用Blazor自动处理CSS隔离 -->
  <ScopedCssEnabled>false</ScopedCssEnabled>
</PropertyGroup>

3. 重新配置Tailwind编译命令 #

确保Tailwind CLI编译主CSS文件到Blazor引用的输出文件，比如在package.json的scripts中设置：

{
  "scripts": {
    "build:tailwind": "npx tailwindcss -i ./wwwroot/css/tailwind.css -o ./wwwroot/css/app.css --watch"
  }
}

运行npm run build:tailwind启动Tailwind的监听模式，修改隔离CSS或razor文件时会自动重新编译。

4. 验证引用 #

确保Blazor的_Host.cshtml中引用的是Tailwind编译后的CSS文件：

<link href="~/css/app.css" rel="stylesheet" />

完成以上步骤后，.from-iso类中的@apply text-blue-600会被Tailwind正确编译，同时razor中的类名也能匹配到生成的样式。

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