如何在Vite构建Vue3组件库时移除未使用的TailwindCSS v4类

核心问题分析 #

你当前的配置把tailwindcss设为了外部依赖，同时未正确配置Tailwind的内容扫描规则，导致打包时无法识别哪些类被实际使用，最终把完整的Tailwind框架打包进产物。要实现仅保留用到的样式，需要从Tailwind配置和Vite打包配置两方面调整。

步骤1：移除Tailwind的外部依赖配置 #

在packages/image-editor-vue/vite.config.ts的rollupOptions.external中删除tailwindcss，组件库需要把用到的Tailwind样式打包到产物中，而非依赖用户环境中的Tailwind：

rollupOptions: {
  external: ['vue'], // 仅保留vue作为外部依赖
  output: {
    exports: 'named',
    globals: {
      vue: 'Vue',
    },
    assetFileNames: 'style.css', // 注意：该配置需放在output根节点，而非globals内
  },
},

步骤2：创建并配置Tailwind配置文件 #

在packages/image-editor-vue目录下新建tailwind.config.js，指定Tailwind需要扫描的文件路径，让它识别哪些类被组件使用：

/** @type {import('tailwindcss').Config} */
export default {
  // 生产模式下自动清除未使用的样式，开发模式保留所有类方便调试
  content: [
    './src/**/*.{vue,js,ts,jsx,tsx}', // 扫描src下所有组件和脚本文件
  ],
  // 若不需要Tailwind默认基础样式，可禁用（可选）
  // corePlugins: {
  //   preflight: false,
  // },
  theme: {
    extend: {},
  },
  plugins: [],
}

Tailwind v3+ 使用content替代了旧版的purge，生产环境构建时会自动清除未匹配到的类。

步骤3：确保入口CSS正确引入Tailwind指令 #

检查packages/image-editor-vue/src/index.css，确保包含Tailwind的基础指令：

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

同时要在src/index.ts中导入该CSS文件，确保样式被打包进产物：

import './index.css'
// 导出你的组件
export { default as Button } from './components/Button/Button.vue'

步骤4：验证打包结果 #

执行vite build后，查看dist/style.css，应该只包含组件中实际用到的Tailwind类，而非完整的Tailwind框架。

内容的提问来源于stack exchange，提问作者Ebraheem Al-hetari