使用Rollup打包带Tailwind样式的React组件时CSS未引入问题求助

你遇到的核心问题是**extract: true 和 inject: true 是互斥配置**：当开启 extract 时，rollup-plugin-postcss 会专注于将CSS单独提取为文件，自动忽略 inject 配置，因此JS文件不会引入CSS。

两种解决思路 #

思路1：让JS自动注入CSS（无需用户手动引入） #

适合组件库场景，CSS会被打包进JS，运行时自动插入页面的 <style> 标签。修改postcss配置：

postcss({
  config: {
    path: "./postcss.config.mjs",
  },
  extract: false, // 关闭单独提取CSS文件
  inject: true, // 开启注入（默认值为true，可省略）
  plugins: [tailwindcss("./tailwind.config.ts"), autoprefixer],
})

修改后编译仅生成JS文件，CSS内容内嵌在JS中，运行时自动生效。

思路2：保留单独CSS文件，让用户手动引入 #

如果需要保留独立的 index.css 文件，需在文档中明确告知用户手动导入CSS：

// 用户使用组件库时需添加
import 'your-design-system/dist/index.css';

同时确保 package.json 的 files 字段包含dist目录的CSS文件：

"files": [
  "dist/**/*"
]

这种情况下原配置无需修改，但JS里不会自动引入CSS——因为extract: true会移除JS中的CSS导入语句。

额外检查 #

确认你的 index.ts 中已正确导入SCSS文件：

import './path/to/main.scss';

内容的提问来源于stack exchange，提问作者Pierre Olivier Tran