Vite预构建后Tailwind的样式为什么失效了？

淑瑶提问于 2026-02-05 15:35:29 阅读 96

优化

在项目里同时用了Ant Design Vue和Tailwind CSS，配置了预构建后，Tailwind的样式突然不生效了。之前单独使用Tailwind没问题，加了optimizeDeps.include: ['ant-design-vue/es']后，控制台报TypeError: Cannot read properties of undefined (reading 'merge')，但页面显示Tailwind的类都没解析。

尝试过把Tailwind相关的包也加入预构建列表，但打包速度变慢很多还是不行。这是我的Tailwind配置片段：


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

/* 自定义样式会覆盖Tailwind */
.button {
  @apply px-4 py-2 bg-blue-500;
  border-radius: 8px; /* 这里开始失效 */
}

有没有可能是预构建打乱了样式加载顺序？或者Tailwind的postcss配置需要特殊处理？

我来解答赞 13 收藏

反馈

2 条解答

シ瑞瑞 Lv1

这个问题我之前踩过坑，核心原因是预构建把 Tailwind 的依赖链搞乱了。Cannot read properties of undefined (reading 'merge') 这个报错说明 tailwindcss 内部模块在预构建环境下找不到正确的依赖引用。

直接给你最高效的解决方案。

第一步，修改 vite.config.js，把 Tailwind 相关的包从预构建里排除掉：

export default defineConfig({

  optimizeDeps: {

    include: ['ant-design-vue/es'],

    exclude: ['tailwindcss', 'postcss', 'autoprefixer']

  }

})

Exclude 比 Include 更干脆，Tailwind 这种构建时工具根本不需要预构建，让它走正常的编译流程效率更高。

第二步，检查你的 postcss.config.js 配置顺序，确保 Tailwind 在最前面：

export default {

  plugins: {

    tailwindcss: {},

    autoprefixer: {},

  }

}

第三步，tailwind.config.js 里加个配置防止和 Ant Design 的样式冲突：

export default {

  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],

  corePlugins: {

    preflight: false  // 关掉基础样式重置，避免覆盖 Ant Design

  }

}

另外吐槽一句，你那段 CSS 写法本身没问题，但 @apply 里面的类如果失效，多半是 Tailwind 根本没跑起来。预构建这玩意儿有时候挺坑的，Vite 会把依赖提前打包成 ES Module，但 Tailwind 这种需要在构建时分析文件内容的工具，预构建反而会破坏它的执行上下文。

按上面改完重启 dev server，应该就正常了。还不行的话检查一下 node_modules 里是不是有多个版本的 tailwindcss，跑一下 npm ls tailwindcss 看看。

2026-03-02 11:29

栾诺 Lv1

你这个问题我之前也遇到过。Vite预构建把Tailwind拆成多个模块导致样式加载顺序错乱，应该排除Tailwind相关的依赖。

在你的vite.config.js里，这样改：

export default defineConfig({

  optimizeDeps: {

    include: ['ant-design-vue/es'],

    exclude: ['tailwindcss', 'postcss']

  }

})

另外确保tailwind的postcss配置正确，不要手动import那些base/components/utilities，用postcss-import处理：

const postcssImport = require('postcss-import');

const tailwindcss = require('tailwindcss');



module.exports = {

  plugins: {

    postcssImport: {},

    tailwindcss: {}

  }

}

删掉node_modules/.vite目录再试。

2026-02-05 16:03