Nx monorepo中项目外样式文件Tailwindcss @tailwind指令不生效问题

问题原因 #

PostCSS默认仅会解析postcss.config.js所在目录及其子目录下样式文件中的PostCSS指令（包括@tailwind、@apply等）。你将全局样式存放在libs目录下，属于应用目录（apps/my-app）的上级路径范围，因此PostCSS不会处理其中的@tailwind指令，只会保留你自定义的.test类和CSS变量，所以Tailwind工具类不会生成生效。

解决方案 #

以下是两种适配Nx monorepo的可行方案：

方案1：调整导入方式 + 补充Tailwind扫描范围（单应用场景优先）

• 首先修改应用的apps/my-app/tailwind.config.js，将libs目录加入内容扫描范围，保证libs中用到的Tailwind类可以被正常生成：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // 原有应用内的文件扫描规则
    './src/**/*.{html,ts,js,scss}',
    // 新增libs目录的扫描规则，按需调整匹配后缀
    '../../libs/**/*.{html,ts,js,scss}'
  ],
  // 其余原有配置保持不变
  theme: {
    extend: {},
  },
  plugins: [],
}

• 不再直接在workspace.json的styles数组中引入libs下的全局样式，改为在应用自身的入口样式文件apps/my-app/src/styles.scss中导入该全局样式：

// apps/my-app/src/styles.scss
@import '../../libs/ui-shared/src/lib/styles/global-styles.scss';

• 最后修改workspace.json的styles配置，仅保留应用自身的样式文件路径即可：

"styles": ["apps/my-app/src/styles.scss"]

方案2：根目录存放公共配置（多应用共享场景优先）

如果你的monorepo下有多个应用都需要用到这套Tailwind规则和全局样式，可以统一把tailwind.config.js和postcss.config.js移到monorepo根目录，再在各个应用的配置中继承根配置即可：

• 根目录的tailwind.config.js默认加入libs目录的扫描规则：

// 根目录tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './libs/**/*.{html,ts,js,scss}'
  ],
  // 公共主题、插件配置
}

• 应用的tailwind.config.js继承根配置，补充自身目录的扫描规则：

// apps/my-app/tailwind.config.js
const rootTailwindConfig = require('../../tailwind.config');

module.exports = {
  ...rootTailwindConfig,
  content: [
    ...rootTailwindConfig.content,
    './src/**/*.{html,ts,js,scss}'
  ]
}

配置完成后，所有应用都可以直接导入libs下的全局样式文件，不需要额外调整路径规则。

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