Vue项目配合TailwindCSS执行build打包后样式不生效问题求助

TailwindCSS 生产打包时默认会开启 Purge 树摇功能，仅保留你配置的扫描路径中出现过的样式类。你当前 tailwind.config.js 中的 purge 配置仅扫描了 html 和 js 文件，Vue 单文件组件（.vue后缀）内使用的 Tailwind 类没有被纳入扫描范围，打包时会被当成无用代码删除，导致生产环境样式缺失。

1. 修改 tailwind.config.js 配置 #

更新 purge 字段，新增 .vue 文件的匹配规则：

module.exports = {
  purge: [
    './src/**/*.html',
    './src/**/*.js',
    './src/**/*.vue' // 新增该行，扫描所有Vue单文件
  ],
  darkMode: false,
  theme: {
    extend: {
      // 建议将自定义背景色配置移到extend内，避免覆盖默认主题配置
      backgroundColor: theme => ({
         ...theme('colors'),
         'yellow-background': '#FEF48E',
         'red-headbar': '#90E39A',
         'green-body': '#EDD9A3',
         'post': '#FBE7C6'
      })
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

2. 补充检查项 #

如果修改后仍有问题，检查以下两项配置：

• 确认全局CSS文件（一般为src/assets/index.css等）已引入Tailwind基础样式，且该CSS文件已在入口main.js中导入：

/* 全局CSS文件顶部添加以下三行 */
@tailwind base;
@tailwind components;
@tailwind utilities;

• 确认项目根目录下的postcss.config.js配置正确：

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

配置修改完成后重新执行npm run build即可正常加载样式。

内容的提问来源于stack exchange，提问作者Tiến Lê