Tailwind CSS 本地运行正常 Vercel 构建部署后样式失效如何解决

1. 优先级最高的根因：Tailwind 样式扫描路径语法错误 #

你当前的 Tailwind 配置中，purge 字段（用于生产构建时摇树删除未使用的Tailwind样式，Tailwind v3版本对应content字段）的路径存在语法错误：

// 错误写法：*. 与后缀列表中间多了换行和空格，导致无法匹配components目录下的文件
purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*. 
{js,ts,jsx,tsx}"],

本地开发默认不开启样式摇树优化，所有Tailwind样式都完整加载，所以表现正常；Vercel上走生产构建逻辑，会按照配置的路径扫描用到的样式类，路径匹配失败后，你代码中用到的大量Tailwind类会被误判为未使用而被删除，最终导致样式失效。

修复方式： #

删除路径中的换行和多余空格，修正为正确写法：

// Tailwind v2 版本写法
purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],

// 若使用Tailwind v3版本，建议替换为官方推荐的content字段
content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],

2. 其他可排查的校验点 #

• 确认你封装的Col组件正确透传了className属性到内部DOM节点，避免属性丢失导致样式不生效
• 检查项目依赖中tailwindcss是否被错误放到了devDependencies下，生产构建时可能无法正确加载
• 确认项目中没有其他自定义CSS的优先级高于Tailwind样式，覆盖了flex相关属性，生产构建的CSS合并顺序和本地开发可能存在差异
• 本地先执行生产构建命令（如Next.js项目执行npm run build && npm start）验证样式是否失效，如果本地生产环境也复现问题，就可以完全确定是路径配置错误导致的。

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