Tailwind 站点本地运行正常部署到 Netlify 后样式显示异常求助

我的项目配置非常基础，仅使用 HTML 开发，未引入 Vue 等框架，已正确安装 Tailwind 且本地运行一切正常。使用 netlify deploy 命令部署到 Netlify 后，Tailwind 样式虽已生效，但站点整体显示效果和本地差异很大，我未开启 purge 功能。

操作步骤 #

• 本地修改代码时，监听器处于运行状态，所有产物都输出到 /dist 目录
• 项目使用 SCSS 编写样式
• 终端执行 netlify deploy 命令完成部署

效果对比 #

• 本地运行效果：
• Netlify 部署效果：
  可见 Netlify 部署版本的图标间距明显过大，但我检查两端代码完全一致，排查了数小时仍未找到问题根源，无法继续推进开发。

已尝试的解决方案（均无效） #

• 在 Tailwind 配置文件中添加 purge 规则
• 执行 netlify deploy --prod 命令部署生产版本
• 清除浏览器和 Netlify 缓存

相关信息 #

• 代码仓库地址：https://github.com/RobineSavert/map-portfolio
• Netlify 部署站点地址：https://6190119577337c9293c65f02--ecstatic-thompson-9cf61b.netlify.app/
• Netlify 部署配置：

1. 全量构建后再部署
   执行部署前先停止本地热更新监听器，手动运行本地全量构建命令（如npm run build），确认dist目录下的所有CSS、HTML文件为最新生成的产物后，再执行netlify deploy命令。热更新场景下的增量生成产物可能存在缓存，会导致部署的是旧版本代码。

2. 检查Tailwind基础样式引入
   站点图标间距异常是典型的浏览器默认样式未被重置的表现，确认入口SCSS文件顶部是否完整引入了三层Tailwind指令：

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

若缺失@tailwind base，Tailwind的默认样式重置规则不会生效，浏览器自带的元素margin、padding会导致布局偏移。

3. 校验构建环境一致性
   如果使用Netlify自动构建而非手动推送dist目录，需确认两个配置：

• Netlify控制台的构建命令和本地开发使用的构建命令完全一致
• Netlify的Node.js版本和本地开发环境的Node.js版本一致，避免依赖版本差异导致编译产物不同
  可以查看Netlify构建日志，排查是否存在SCSS编译报错、Tailwind指令未识别的问题。

4. 对比两端CSS内容
   分别导出本地dist目录下的CSS文件和Netlify部署站点的CSS文件，对比文件内容是否完全一致。如果内容相同但布局表现不同，可在html标签上临时添加style="margin:0;padding:0"测试，确认是否为浏览器默认样式干扰导致的问题。

内容的提问来源于stack exchange，提问作者R-b-n