Vite MPA多页面Vue项目集成TailwindCSS构建后serve无样式问题

云原生阿岚

2026-10-4

Tailwind CSS 生产环境样式丢失解决方案

问题根因

yarn dev运行正常、yarn serve（生产构建后本地预览）无样式的问题，是Tailwind生产环境Tree Shaking机制导致的：
Tailwind默认仅在生产构建时开启无用样式裁剪，会根据配置的文件扫描范围，只保留项目中实际用到的类名。如果扫描路径没有覆盖所有用到Tailwind类名的文件，就会把所有样式都裁剪掉，出现生产环境无样式的问题。

修复方案

该项目的业务文件（page1/2/3.vue、page1/2/3.html）都存放在根目录，还有单独的components组件目录，默认的Tailwind扫描配置一般只覆盖src目录，没有匹配到这些文件，所以导致样式被全部裁剪。
根据使用的Tailwind版本调整tailwind.config.js配置即可：

Tailwind v3 版本配置

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 配置需要扫描的文件路径，确保覆盖所有用到Tailwind类名的文件
  content: [
    "./components/**/*.{vue,js,ts,jsx,tsx}",
    "./page*.{vue,html,js,ts}",
    "./src/**/*.{vue,html,js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Tailwind v2 版本配置

module.exports = {
  // v2 用purge字段配置扫描路径
  purge: [
    "./components/**/*.{vue,js,ts,jsx,tsx}",
    "./page*.{vue,html,js,ts}",
    "./src/**/*.{vue,html,js,ts,jsx,tsx}"
  ],
  darkMode: false,
  theme: {
    extend: {},
  },
  plugins: [],
}