Nx风格单体仓库中Angular Cypress组件测试TailwindCSS样式失效问题

为啥样式不生效还报警告？ #

Tailwind的content路径是相对于配置文件所在位置解析的。如果你的tailwind.config.js不在仓库根目录，或者Nx的构建上下文导致相对路径没命中apps和libs下的文件，就会扫不到工具类，自然样式不生效还弹警告。另外，你原来的配置没包含测试文件，所以组件测试也没样式。

靠谱的配置方案 #

1. 精准命中文件（推荐） #

如果配置文件在仓库根目录，直接写全路径，同时补上测试相关文件：

content: [
  './apps/**/*.{html,ts}',
  './libs/**/*.{html,ts}',
  // 解决测试无样式问题
  './apps/**/*.spec.ts',
  './libs/**/*.spec.ts',
  './apps/**/*.component.html',
  './libs/**/*.component.html'
]

要是还是不行，用绝对路径兜底，避免相对路径解析出错：

content: [
  `${process.cwd()}/apps/**/*.{html,ts}`,
  `${process.cwd()}/libs/**/*.{html,ts}`,
  `${process.cwd()}/apps/**/*.spec.ts`,
  `${process.cwd()}/libs/**/*.spec.ts`
]

2. 用宽泛路径但排除node_modules #

如果非要用./**/*这种写法，必须加上排除规则，别让Tailwind扫node_modules拖慢速度：

content: [
  './**/*.{html,ts}',
  '!./node_modules/**/*'
]

3. 利用Nx官方插件简化配置 #

要是你用了Nx的Tailwind插件，直接在项目的project.json里指定配置文件路径，插件会自动帮你处理内容路径，不用自己写一堆规则：

"targets": {
  "build": {
    "options": {
      "tailwindConfig": "apps/你的项目名/tailwind.config.js"
    }
  }
}

别忘了这俩细节 #

• 改完配置必须重启Nx开发服务器，否则新配置不生效。
• 确认组件里真的用了Tailwind工具类，不然警告还是会跳出来。

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