Rollup打包React组件库后Tailwind CSS样式未生效问题

基于Tailwind CSS 3开发React组件库时，Storybook运行环境下组件样式展示完全正常，Rollup打包后的产物仅保留DOM节点上的Tailwind类名字符串，未生成对应CSS样式规则，组件导入外部项目使用时Tailwind样式完全不生效。

• 组件库JS入口未引入包含Tailwind基础指令的全局CSS文件，Rollup构建流程无法捕获样式入口，不会触发Tailwind的CSS编译逻辑
• PostCSS插件配置存在冗余，未正确配置样式注入规则，编译生成的CSS无法写入最终构建产物

1. 在组件库入口引入全局样式 #

打开组件库入口文件src/index.js，在文件最顶部引入编写了Tailwind指令的CSS文件：

// 新增这行引入
import './index.css';

// 原有组件导出逻辑保持不变，例如
export { Button } from './components/Button';

2. 调整Rollup的PostCSS插件配置 #

修改rollup.config.js中的postcss插件配置项，简化注入逻辑，保证样式能被正确处理：

postcss({
  config: {
    path: './postcss.config.js',
  },
  extensions: ['.css'],
  minimize: true,
  inject: true, // 自动将编译完成的CSS插入页面head，无需用户手动引入样式
  // 若需要单独抽离CSS文件，可将inject设为false，extract设为输出路径例如'index.css'，同时在package.json中新增"style": "dist/esm/index.css"字段
}),

若选择抽离独立CSS文件的方案，外部项目使用组件时需要手动引入该CSS文件才能让样式生效。

3. 校验Tailwind扫描配置 #

现有tailwind.config.js的content配置['./src/**/*.{js,jsx,ts,tsx}']已覆盖所有组件源码路径，无需修改，Tailwind可以正常扫描到所有用到的工具类生成对应CSS。

4. 重新构建验证 #

执行npm run rollup重新打包，检查生成的dist/esm/index.js产物，可看到文件内包含样式注入的相关逻辑代码，不再只有纯组件JS逻辑。将构建后的包导入外部项目测试，Tailwind样式可正常生效。

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