NX单体仓库中如何让共享样式库的@tailwind关键字正常生效

解决方案 #

这个问题的核心是Tailwind CSS预处理器默认仅处理当前应用目录下的CSS文件，且Tailwind配置未包含独立样式库的路径，导致@tailwind、@apply等关键字未被正确编译，按以下步骤调整即可：

• 第一步：修改应用根目录下的tailwind.config.js，在content字段中添加独立样式库的源码路径，确保Tailwind可以扫描到样式库中定义的自定义类、以及样式库关联组件用到的Tailwind类：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // 保留原有应用的扫描路径
    './apps/**/*.{html,js,ts,jsx,tsx}',
    // 新增样式库的扫描路径，匹配所有代码和样式文件
    './libs/shared/ui-styles/src/**/*.{html,js,ts,jsx,tsx,css}'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

• 第二步：调整应用的样式导入逻辑，不要直接在workspace.json的styles数组中引用样式库的CSS文件，改为在应用的入口CSS文件（即apps/example/src/styles.css）顶部导入样式库的CSS：

/* apps/example/src/styles.css 文件顶部添加 */
@import 'libs/shared/ui-styles/src/lib/styles.css';

• 第三步：重启本地开发服务即可生效，样式库中定义的自定义类、Tailwind原生工具类、普通CSS变量都可以正常加载使用。

如果你的monorepo配置了路径别名，导入样式库CSS时可以直接使用别名路径，比如@my-org/shared/ui-styles/src/lib/styles.css，不需要写完整相对路径。

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