nginx 返回404的根本原因是请求路径与磁盘文件实际路径不匹配，如配置root为/usr/share/nginx/html但css在/dist/css/下，或构建后带hash的文件名未同步到html引用中。
为什么 Nginx 返回 404 而不是 CSS 内容
根本原因不是 Tailwind 没编译，也不是 HTML 引用错了路径，而是 Nginx 根本没找到那个 CSS 文件——它按字面路径去磁盘上找 /css/tailwind.css，但实际文件可能在 /dist/css/tailwind.abc123.css，或压根不在你配置的 root 目录下。
常见现象包括：
- 浏览器 Network 面板里 CSS 请求状态是 404，Response 是 “Not Found” 或空白
- 直接访问
http://your-domain/css/tailwind.css得到 404，而不是 CSS 源码 - HTML 中
<link href="/css/tailwind.css">看似合理，但 Nginx 的root指向的是/usr/share/nginx/html，而你的 CSS 实际在/usr/share/nginx/html/dist/css/
检查 Nginx 的 root 和 location 是否匹配构建产物结构
Nginx 不会自动“猜”你的资源在哪，它只认 root + URI 的拼接结果。比如你构建后生成了 dist/css/tailwind.8a3f9.css，那必须让 /css/tailwind.8a3f9.css 这个请求最终落到该物理路径上。
确认方式：
- 进服务器，运行
ls -l /usr/share/nginx/html/dist/css/，看是否存在目标 CSS 文件 - 检查 Nginx 配置中
root指向的是否是/usr/share/nginx/html（不是/usr/share/nginx/html/dist） - 如果
root是/usr/share/nginx/html，那么location /css/就应该存在，且需确保请求路径与磁盘结构对齐 - 更稳妥的做法：把构建产物整个拷贝进
root目录（即/usr/share/nginx/html/），再让 HTML 中的href与之完全对应
静态资源路径被 publicPath 或构建配置悄悄改写
Tailwind 本身不控制路径，但构建工具（Vite、Webpack）会通过 publicPath 或 base 注入前缀。如果你设了 base: "/app-v2/"，那所有资源都会变成 /app-v2/css/tailwind.css —— 但 Nginx 若没配 location /app-v2/，就必然 404。
排查步骤：
- 打开浏览器开发者工具，看 Network 里 CSS 请求的完整
Request URL，复制下来 - 对比
nginx.conf中location块是否覆盖该前缀（例如有location /app-v2/） - 检查构建产物的
index.html源码，确认<link href="...">的值是否含预期前缀 - 若用 contenthash 文件名（如
tailwind.8a3f9.css），确保 HTML 中引用的也是这个带 hash 的文件名，而非原始tailwind.css
别忽略 try_files 和 SPA 路由对静态资源的影响
很多 Nginx 配置为支持 Vue/React SPA 加了 try_files $uri $uri/ /index.html，这在主应用路由上很必要，但它会对 CSS 请求产生副作用：当 $uri 对应的 CSS 文件不存在时，Nginx 会 fallback 到 /index.html，导致返回 HTML 内容却标称 200 —— 浏览器解析失败，样式照样不生效，但错误更隐蔽（不是 404，而是 MIME 类型错）。
正确做法是分路径处理：
- 对静态资源（CSS/JS/字体等）单独配
location ~* \.(css|js|woff2?|ttf|eot|svg)$ - 在这个 location 里用
try_files $uri =404，避免 fallback 到 index.html - 主
location /保留try_files $uri $uri/ /index.html处理前端路由
否则你看到的“样式没变”，可能只是浏览器加载了一个 HTML 文件当 CSS 解析，然后静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
