Blazor搭配TailwindCSS：如何让Tailwind扫描RCL中的组件？

核心方案 #

不用给RCL单独配置Tailwind，直接在主Blazor项目的tailwind.config.js中添加RCL的文件路径，让主项目统一扫描所有需要的文件并生成单一CSS文件，从根源避免样式冲突。

具体操作步骤 #

• 修改主项目的tailwind.config.js
  在content数组里补充RCL项目的文件相对路径（路径需根据你的实际项目结构调整）：

  module.exports = {
    mode: "jit",
    content: [
      // 主项目自身的文件
      "**/*.razor", 
      "**/*.cshtml", 
      "**/*.html", 
      "**/*.razor.css",
      // 指向RCL项目的源码文件（示例路径，按需修改）
      "../YourRclProjectName/**/*.razor",
      "../YourRclProjectName/**/*.razor.css"
    ],
    theme: {},
    variants: {},
    plugins: [],
  }
  

  注意：路径是相对于主项目tailwind.config.js所在位置的相对路径，要确保能正确指向RCL的源码文件，而非编译后的DLL。

• 给RCL组件类名加专属前缀
  为彻底避免类名冲突，建议给RCL组件的Tailwind类名加上专属前缀，比如把btn改成rcl-btn，这样主项目和RCL的样式不会产生交集。

• 重新构建CSS
  运行你配置的Tailwind构建命令（比如npm run build），主项目生成的CSS文件就会包含RCL组件用到的所有Tailwind样式。

之前方法出错的原因 #

给Blazor项目和RCL分别配置Tailwind会生成两个独立的CSS文件，引入时后加载的文件会覆盖先加载文件中的同名类样式，导致部分组件样式异常。而统一由主项目扫描生成单一CSS文件，Tailwind会自动合并相同类的样式，不会出现覆盖问题。

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