使用Storybook+TailwindCSS组件库时宿主应用CSS类重复问题求助

我用Storybook+TailwindCSS做了个组件库，另一个同样用Tailwind的宿主应用要导入这个组件库。现在碰到了CSS类重复的问题：

• 俩项目都在各自的index.css里按标准方式引入Tailwind，再导入到index.tsx
• 宿主导入组件库后，会生成组件库的所有类，但像inline这类重复的类，会因为加载顺序导致样式被覆盖
• 组件在Storybook里显示正常，到宿主应用就样式错乱
• 已经确认组件库生成的Tailwind类被打包进了dist下的index.js里，就是这些类导致了重复

1. 改组件库构建流程，单独输出CSS文件 #

别把Tailwind样式打包进组件的JS里，单独生成CSS文件：

• 组件库的tailwind.config.js里，content要覆盖所有组件源文件：

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

• 调整构建工具（比如Vite/Rollup）的配置，把CSS单独提取成dist/index.css。拿Vite举例，vite.config.js里加好CSS提取的配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  build: {
    lib: {
      entry: './src/index.ts',
      name: 'MyComponentLibrary',
      formats: ['es', 'umd'],
      fileName: (format) => `my-component-library.${format}.js`,
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          reactDOM: 'ReactDOM',
        },
      },
    },
    cssCodeSplit: true, // 强制把CSS单独拆出来
  },
})

2. 让宿主应用负责生成组件库的Tailwind样式 #

组件库不用自带Tailwind基础样式，让宿主统一生成所有需要的类（包括组件库用到的）：

• 组件库的package.json里，把TailwindCSS从dependencies移到devDependencies——毕竟开发时才用，生产构建不用打包它
• 宿主的tailwind.config.js里，把组件库的源文件路径加到content里，这样Tailwind会扫描组件库代码，生成需要的类：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/my-component-library/src/**/*.{js,jsx,ts,tsx}" // 换成你的组件库实际路径
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

• 宿主只需要导入组件库的组件就行，不用导入组件库的CSS：

// 只导组件，别导组件库的CSS
import { Button, Card } from 'my-component-library'

3. 备选方案：给组件库的Tailwind类加前缀 #

要是不想让宿主生成组件库的样式，也可以给组件库的类加个前缀，避免冲突：

• 组件库的tailwind.config.js里配置prefix：

module.exports = {
  prefix: 'lib-',
  // 其他配置不变
}

• 这样组件库的类会变成lib-inline、lib-text-red-500，和宿主的类就不会重了
• 这种情况下，宿主需要导入组件库的index.css，同时保留自己的Tailwind样式

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