如何将Tailwind CSS样式打包进Rollup？组件样式失效求助

你遇到的核心问题是：组件库在Storybook中能正常渲染样式，但发布后用户项目里只有类名却没有对应的Tailwind样式。这是因为Tailwind CSS是按需生成样式的，默认只会扫描当前项目的文件，不会自动处理第三方组件库中的类名。Storybook能正常显示是因为它的构建流程会扫描你的组件源文件，生成对应的Tailwind样式，而用户项目的Tailwind配置没有包含组件库的文件路径。

具体修复步骤 #

1. 调整组件库的Tailwind配置 #

确保你的tailwind.config.js（如果没有就新建）正确配置content字段，扫描组件库的所有源文件：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

2. 修改Rollup配置，提取独立CSS文件 #

当前Rollup配置中postcss的inject选项会把样式注入到JS中，但这不适用于组件库场景。修改为提取成单独的CSS文件，让用户可以主动引入：

// rollup.config.js 中的 postcss 插件配置
postcss({
  config: {
    path: './postcss.config.js',
  },
  extensions: ['.css'],
  minimize: true,
  extract: true, // 改为提取独立CSS文件
  // 移除 inject 配置
}),

3. 更新package.json，导出CSS文件 #

在package.json中添加exports字段，明确导出组件库的样式文件，同时调整依赖项（把开发依赖移到devDependencies）：

{
  // ... 其他字段
  "exports": {
    ".": {
      "import": "./dist/esm/index.js",
      "types": "./dist/index.d.ts"
    },
    "./styles": "./dist/index.css" // 导出样式文件
  },
  "dependencies": {
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "tailwind-merge": "^2.2.2"
  },
  "devDependencies": {
    // ... 其他开发依赖
    "rollup-plugin-babel": "^4.4.0",
    "tailwindcss": "^3.4.1"
  }
}

4. 用户项目的两种使用方式 #

用户在安装你的组件库后，有两种方式解决样式问题：

方式一：引入组件库的预生成样式

在项目的入口文件（如src/index.tsx）中引入组件库的样式：

import 'sweet-buttons/styles';

方式二：让用户Tailwind扫描组件库文件

让用户在自己的tailwind.config.js中添加组件库的路径，这样Tailwind会扫描组件库中的类名并生成样式：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/sweet-buttons/dist/esm/**/*.js" // 添加组件库路径
  ],
  // ... 其他配置
}

额外注意事项 #

• 不要把tailwindcss放在组件库的dependencies中，避免和用户项目的Tailwind版本冲突，应该放在devDependencies。
• 确保你的组件源文件中没有直接导入Tailwind的基础CSS（如@tailwind base;），这些应该由用户项目或组件库的预生成CSS提供。

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