使用Rollup发布React组件库时Tailwind样式不生效问题

使用Tailwind CSS v4 + Rollup构建React组件库，发布后在其他项目中使用时，组件内置的变体样式（比如primary/secondary对应的Tailwind类）完全不生效，但通过className传入的自定义Tailwind类可以正常工作。

文件夹结构：

相关代码如下：

Button.tsx #

import type { ButtonHTMLAttributes } from "react"
import { twMerge } from "tailwind-merge"

export interface IButton extends ButtonHTMLAttributes<HTMLButtonElement> {
    variant?: "base" | "primary" | "secondary"
}

const styles = {
    base: "border border-gray-300 bg-transparent hover:border-gray-400",
    primary: "bg-amber-500 border border-amber-500 text-white hover:border-amber-600 hover:bg-amber-600 disabled:bg-amber-500/50 disabled:border-amber-500/1",
    secondary: "bg-gray-200 border border-gray-200 text-gray-800 hover:bg-gray-300 hover:border-gray-300 disabled:bg-gray-100 disabled:border-gray-100"
}

export const Button = ({ type = "submit", disabled = false, className, variant = "base", children }: IButton) => {
    return (
        <button type={type} disabled={disabled} className={twMerge(`rounded-md px-4 py-2 cursor-pointer disabled:cursor-not-allowed transition-colors duration-150 uppercase ${styles[variant]} ${className}`)}>
            {children}
        </button>
    )
}

src/index.ts #

import "./styles.css";
export * from "./components";

styles.css #

@import "tailwindcss";

package.json #

{
  "name": "react-ui-lib-npm",
  "version": "1.0.0",
  "main": "dist/index.cjs.js",
  "module": "dist/index.esm.js",
  "types": "dist/index.d.ts",
  "files": [
    "dist"
  ],
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w"
  },
  "peerDependencies": {
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^25.0.0",
    "@rollup/plugin-node-resolve": "^15.0.0",
    "@rollup/plugin-typescript": "^11.0.0",
    "@tailwindcss/postcss": "^4.0.0",
    "@types/react": "^18.0.0",
    "rollup": "^2.79.2",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-postcss": "^4.0.2",
    "rollup-plugin-terser": "^7.0.2",
    "tailwindcss": "^4.0.0",
    "typescript": "^5.0.0"
  },
  "dependencies": {
    "clsx": "^2.0.0",
    "tailwind-merge": "^3.3.1",
    "tslib": "^2.8.1"
  }
}

rollup.config.js #

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import postcss from "rollup-plugin-postcss";
import { terser } from "rollup-plugin-terser";

export default {
  input: "src/index.ts",
  output: [
    {
      file: "dist/index.cjs.js",
      format: "cjs",
      sourcemap: true,
    },
    {
      file: "dist/index.esm.js",
      format: "esm",
      sourcemap: true,
    },
  ],
  plugins: [
    peerDepsExternal(),
    resolve(),
    commonjs(),
    postcss({
      config: {
        path: "./postcss.config.js",
      },
      extract: true,
      minimize: true,
      sourceMap: true,
      extensions: [".css"],
    }),
    typescript({
      tsconfig: "./tsconfig.json",
    }),
    terser(),
  ],
  external: ["react", "react-dom"],
};

postcss.config.mjs #

module.exports = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

1. 为Tailwind v4添加content配置，扫描组件源码中的类名 #

Tailwind v4默认仅扫描CSS文件，不会自动识别TS/TSX文件字符串中的类名。需要创建tailwind.config.js，指定扫描路径：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./src/**/*.{ts,tsx}", // 扫描所有TS/TSX组件文件
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

2. 调整PostCSS配置，加载自定义Tailwind配置 #

修改postcss.config.mjs，让Tailwind使用刚才创建的配置文件：

import tailwindcss from 'tailwindcss';
import tailwindConfig from './tailwind.config.js';

export default {
  plugins: {
    tailwindcss: tailwindConfig,
  },
};

3. 验证构建产物 #

运行npm run build后，检查dist目录下生成的CSS文件（如dist/index.css），确认其中包含按钮变体对应的类（比如.bg-amber-500、.hover\:bg-amber-600等）。

4. 在package.json中声明CSS入口 #

确保使用方能正确引入组件库样式，在package.json中添加style字段：

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

5. 使用方项目注意事项 #

若使用方也用Tailwind v4，无需额外配置（组件库已打包独立CSS）；若使用方用旧版Tailwind，需确保他们的配置不会冲突覆盖组件样式。

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