基于Vite的组件库中TailwindCSS样式不生效的问题求助

我正在用Vite和TailwindCSS构建可复用组件库，库的目录结构如下：

.
├── lib
│   └── components-core
│       ├── tailwind.config.js
│       ├── vite.config.ts
│       ├── lib
│       ├── dist
│       │   ├── assets
│       │   │   ├── main.css
│       │   └── main.js
│       ├── src
│       │   ├── components
│       │   └── main.ts

在消费应用marketing-initiative/src/main.tsx中，我通过以下方式导入编译后的CSS：

import "@massmarketlabs/components-core/dist/assets/main.css";

但样式并未生效。组件库的vite.config.ts配置如下：

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

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
    dts({
      include: ['lib/**/*'],
    }),
  ],
  build: {
    lib: {
      entry: resolve(__dirname, 'lib/main.ts'),
      formats: ['es'],
    },
    rollupOptions: {
      external: ['react', 'react/jsx-runtime'],
    }
  },
});

我怀疑Tailwind未正确处理组件样式，或者样式在生产构建中被剥离。要怎么确保组件库的Tailwind样式能在消费应用中正常生效？

解决方案 #

1. 修正Tailwind配置文件的扫描路径 #

检查组件库的tailwind.config.js，确保它包含了组件源文件的路径，否则Tailwind不会扫描这些文件生成对应样式：

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

2. 添加Tailwind入口CSS并在组件库中导入 #

在组件库中创建Tailwind入口CSS文件（比如src/styles/tailwind.css），写入以下内容：

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

然后在组件库的入口文件lib/main.ts中导入该CSS文件，确保构建时样式被打包进产物：

import './src/styles/tailwind.css';
// 导出组件
export { Button } from './src/components/Button';
// ...其他组件导出

3. 调整Vite构建配置确保CSS正确输出 #

修改组件库的vite.config.ts，添加输出配置并禁用CSS代码拆分，避免样式被意外剥离：

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

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
    dts({
      include: ['lib/**/*'],
    }),
  ],
  build: {
    lib: {
      entry: resolve(__dirname, 'lib/main.ts'),
      formats: ['es'],
      fileName: 'main',
    },
    rollupOptions: {
      external: ['react', 'react/jsx-runtime'],
      output: {
        assetFileNames: 'assets/[name].[hash].css',
      },
    },
    cssCodeSplit: false,
  },
});

4. 确认消费应用的CSS导入路径匹配 #

检查组件库dist/assets目录下的实际CSS文件名，确保消费应用的导入语句路径与实际文件一致。

5. 消费应用使用Tailwind时的兼容处理 #

如果消费应用也用了TailwindCSS，需要在它的tailwind.config.js中添加组件库路径，防止组件类名被PurgeCSS移除：

export default {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@massmarketlabs/components-core/**/*.{js,ts,jsx,tsx}"
  ],
  // ...其他配置
}

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