如何配置Vite React构建的NPM包 使Tailwind CSS在引入后生效

我用Vite（React）和TailwindCSS开发了一个NPM包，本地运行正常，但安装到其他项目中时，Tailwind CSS样式无法生效。该如何配置包，使其在被其他项目引入时能正确加载CSS样式？

当前配置文件 #

vite.config.js #

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

export default defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/lib/index.jsx'),
      name: 'paginated-table-react-pkg',
      fileName: (format) => `paginated-table-react-pkg.${format}.js`
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React'
        }
      }
    }
  },
  plugins: [react()],
  css: {
        postcss: {
            plugins: [
                require('tailwindcss')({
                    config: './tailwind.config.js'
                }),
             ],
        }
    },
})

tailwind.config.js #

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

postcss.config.js #

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

依赖版本 #

"postcss": "^8.4.25",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"tailwindcss": "^3.3.2",
"vite": "^4.4.2"

我已尝试在vite.config.js中添加上述css配置，但问题仍未解决。

解决方案 #

1. 单独提取Tailwind样式文件 #

在包的src目录下创建样式文件（比如src/lib/styles/tailwind.css），写入Tailwind核心指令：

@tailwind base;
@tailwind components;
@tailwind utilities;

2. 在包入口文件中引入样式 #

修改src/lib/index.jsx，在组件导出前引入刚才创建的样式文件：

import './styles/tailwind.css';

// 你的组件导出代码
export { default as PaginatedTable } from './PaginatedTable';
// 其他组件导出...

3. 调整Vite配置 #

移除vite.config.js中的css.postcss配置（已有独立的postcss.config.js），并确保Rollup正确处理CSS打包：

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

export default defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/lib/index.jsx'),
      name: 'paginated-table-react-pkg',
      fileName: (format) => `paginated-table-react-pkg.${format}.js`
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React'
        }
      }
    },
    // 确保CSS被单独打包到产物中
    cssCodeSplit: true,
  },
  plugins: [react()],
})

4. 验证打包结果 #

执行npm run build后，检查dist目录，应包含对应的CSS文件（例如paginated-table-react-pkg.css），说明样式已被正确打包。

5. 兼容用户项目的Tailwind配置（可选） #

如果使用该包的项目本身也依赖Tailwind，需要用户在自己的tailwind.config.js中添加包的路径到content数组，避免样式被Purge移除：

module.exports = {
  content: [
    // 原有项目路径
    './node_modules/paginated-table-react/**/*.{js,jsx,ts,tsx}',
  ],
  // 其他配置
}

若你的包已独立打包CSS，此步骤非必须，用户直接引入组件即可加载样式。

内容的提问来源于stack exchange，提问作者Thaïs de Rodez