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

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

优化

在项目里同时用了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配置需要特殊处理？

我来解答赞 3 收藏

反馈

1 条解答

栾诺 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