Rollup打包React+Tailwind组件库：部分className样式丢失问题

问题根源 #

1. Tailwind 样式未完整生成：Tailwind 的 JIT 模式依赖扫描代码中的类名生成对应 CSS，但当前 Rollup 打包配置导致 Tailwind 无法完整识别组件内的所有类名，部分样式被遗漏。
2. CSS Modules 配置冲突：rollup-plugin-postcss 开启了 modules: true，会把 Tailwind 的全局类名当作 CSS Modules 处理，导致类名被哈希化或全局样式未正确提取。
3. 样式导出关联缺失：打包后的 CSS 文件未与库入口正确绑定，使用项目无法自动加载完整样式。

具体修复步骤 #

1. 修正 Rollup 的 PostCSS 配置 #

修改 rollup.config.js 中的 postcss 插件配置，关闭 CSS Modules 并明确样式提取路径：

postcss({
  config: {
    path: './postcss.config.js',
  },
  minimize: true,
  modules: false, // Tailwind是全局样式，关闭CSS Modules
  extract: 'dist/styles.css', // 指定提取的全局样式文件名
  extensions: ['.css'],
  inject: false, // 关闭自动注入，让使用方按需引入
}),

2. 确保 PostCSS 配置正确 #

若项目中无 postcss.config.js，创建该文件并添加以下内容：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

3. 关联样式到库入口 #

在 src/index.ts 中引入全局样式文件（假设样式入口为 src/styles/index.css）：

import './styles/index.css';

// 导出组件
export { YourComponent } from './components/YourComponent';
// ...其他组件导出

同时在 package.json 中添加 style 字段，方便使用项目自动识别样式：

{
  // ...其他配置
  "style": "dist/styles.css"
}

4. 重新打包验证 #

执行 npm run build 重新打包，在测试项目中安装该库后，检查组件样式是否正常加载。

额外注意事项 #

• 避免在组件中使用动态拼接的 Tailwind 类名（如 bg-${color}），JIT 模式无法识别这类动态写法，会导致样式丢失。
• 当前 tailwind.config.js 已配置扫描 flowbite-react 的文件，确保了第三方组件样式的生成，无需修改。

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