部署到主机后Laravel Vite构建的Tailwind CSS为何PC端失效？

以下按出现概率从高到低排列，可逐点排查：

• Tailwind构建时断点类被摇树剔除
  这是该问题最高发的原因：移动端用到的是无响应式前缀的基础样式类，而PC端专属样式基本都带md:/lg:/xl:这类断点前缀，如果tailwind.config.js里的content配置没有覆盖所有写了Tailwind类的文件路径，Tailwind在生产构建时会把未扫描到的类全部删除，最终生成的CSS文件里只保留了你移动端用到的基础类，PC端断点类完全不存在。
  排查方法：PC端打开浏览器开发者工具，选中一个写了断点类的DOM元素，在样式面板搜索对应的断点类名，如果搜不到任何匹配规则即可确认。修复方案是补全content配置，确保覆盖所有Blade模板、前端组件路径，例如默认配置需包含resources/**/*.blade.php、resources/**/*.js、resources/**/*.vue等你实际写样式类的文件路径。
• Heroku构建流程未生成完整CSS文件
  很多开发者会把本地构建生成的不完整CSS文件提交到Git仓库（本地开发时JIT模式只会按需生成当前预览过的页面用到的类，如果你本地只在移动端尺寸下预览过页面，生成的CSS就只有移动端类），同时Heroku部署时没有配置正确的Node构建脚本，不会在服务器端重新执行生产构建，直接使用你提交的残缺CSS文件。
  排查方法：查看Heroku部署日志，确认部署阶段是否成功执行npm run production（Laravel Mix）或npm run build（Vite）命令；同时把Git仓库里public/css、public/build目录下的构建产物移除，避免覆盖服务器端构建的文件。
• PC端浏览器本地拦截或缓存异常
  移动端浏览器一般默认无扩展拦截，PC端安装的广告拦截、隐私防护类扩展很容易误拦截静态CSS资源；国内网络环境下，部分运营商对境外静态资源的拦截规则在PC/移动端存在差异，也可能导致PC端CSS请求失败；另外如果PC端浏览器缓存了部署初期的残缺CSS文件，也会导致样式加载失败。
  排查方法：打开浏览器无痕模式（默认禁用所有扩展）按Ctrl+F5强制刷新页面，同时打开开发者工具的Network面板，查看CSS文件的请求状态，确认没有被拦截、404或异常跳转的情况。
• Tailwind断点配置不符合预期
  如果你自定义过tailwind.config.js里的screens（断点）配置，比如把md/lg断点的阈值设得过高（例如将lg断点设为1920px），当你PC端浏览器视口宽度小于设定阈值时，所有带对应前缀的PC端样式都不会触发。
  排查方法：核对配置文件中的断点数值，和你当前PC端浏览器的视口宽度做对比，确认断点逻辑符合预期。
• 模板存在UA判断引入错误资源
  如果你的Blade模板里写了基于User-Agent的条件判断逻辑，给PC端UA输出了单独的、不存在的CSS资源路径，也会导致PC端完全无样式，移动端正常加载Tailwind。
  排查方法：直接在PC端查看页面源代码，搜索CSS引入标签，确认PC端和移动端输出的CSS路径一致、且路径可正常访问。

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