如何在外部仓库中使用Tailwind？自定义组件类名样式不生效求助

• 路径配置错误
  你当前填写的content扫描路径存在拼写错误：node_modules的名称中间是下划线不是横杠，且相对路径开头的层级表述错误，修正后的路径为：
  './node_modules/@my-name/react-tailwindui/lib/**/*.{ts,tsx}'
  修改后重启项目开发服务即可生效。

• 确认组件库构建输出规则
  如果修改路径后仍有类名不生效，需要检查你的私有组件库的构建配置：如果构建时对类名字符串做了压缩、混淆或者CSS Modules转换，会导致主项目的Tailwind扫描逻辑无法识别到完整的类名，不会生成对应的样式。需要调整组件库构建规则，仅编译TS/TSX语法为可执行的JS代码，不对静态class字符串做任何修改。

• 静态类名兜底
  如果组件库存在动态拼接的Tailwind类名，可以在主项目的Tailwind配置中添加safelist字段，手动指定需要保留的类名，避免被Tree Shaking移除：

// tailwind.config.js
module.exports = {
  // 其余配置
  safelist: [
    'p-2.5',
    'bg-primary-600',
    // 其余组件库用到的、无法被自动扫描到的类名
  ]
}

• 更稳定的通用方案
  你可以直接在私有组件库的构建流程中单独打包组件用到的Tailwind样式，生成独立的CSS文件随组件库一起发布，主项目引入组件库的同时引入对应CSS文件即可，无需额外配置扫描组件库路径，也能避免不同项目Tailwind版本差异导致的样式兼容问题。

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