Yarn Cross-env项目中TailwindCSS Tree Shaking不识别Shared文件夹组件

1. 补全Content配置的文件后缀 #

你的tailwind.config.js中content数组仅包含html,js,jsx,ts,tsx后缀，但shared文件夹内的组件都是.vue格式，导致Tailwind无法扫描到这些文件。必须添加.vue后缀：

export default {
  content: [
    "./src/**/*.{html,js,jsx,ts,tsx,vue}", // 为app目录下的文件添加.vue后缀
    "../shared/**/*.{html,js,jsx,ts,tsx,vue}", // 为shared目录添加.vue后缀并修正路径
  ],
};

2. 确保路径指向正确 #

根据你的目录结构：

./
./app
    ./src
        ./main.js 
    ./vite.config.js  # 假设vite配置文件在此目录
./shared

• 若tailwind.config.js放在app文件夹内（与vite.config.js同目录），指向shared的相对路径应为../shared（因为shared在app的上级目录），而非./shared。
• 若将tailwind.config.js放在根目录，则路径需写成./shared/**/*.{vue,js,...}和./app/src/**/*.{vue,js,...}，同时在vite.config.js中指定配置文件路径：

  // app/vite.config.js
  export default defineConfig({
    plugins: [
      tailwindcss({ config: '../tailwind.config.js' }), // 指定根目录的配置文件
      vue(),
    ],
  })
  

3. 验证配置有效性 #

在shared/views/App.vue中添加测试Tailwind类（如<div class="bg-red-500">测试样式</div>），启动项目查看样式是否生效。若仍无效：

• 清除Vite缓存：删除node_modules/.vite文件夹后重启开发服务
• 确认shared文件夹中的组件已被项目实际引入（比如在app/src/main.js中导入使用），Tailwind仅会扫描被引用的文件（Tree Shaking机制）

4. 关于不存在的文件夹不报错 #

Tailwind CSS v4默认不会对不存在的路径抛出错误，因此../sharedtest/**/*不会触发报错，属于正常行为。

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