Tailwind CDN与本地npm配置（webpack）样式不一致的原因及解决方法

两类样式差异的核心原因 #

• 基础重置层未加载：你观察到的html { line-height: 1 }、body { margin: 8px }并非Tailwind的配置样式，是浏览器原生默认样式未被覆盖的表现。CDN引入的Tailwind会默认全量注入Preflight基础重置层（抹平所有浏览器默认边距、行高的基础样式），如果本地编译流程没把这层样式打包到最终文件，就会直接露出浏览器默认渲染效果，和Tailwind的预期表现完全脱节。
• 工具类被Purge功能误删：你配置里的Purge扫描路径仅覆盖了./templates/**/*.php，但你复用的HTML源文件根本不在这个扫描路径范围内。Tailwind会扫描指定路径下的所有文件提取实际用到的类名，没被扫到的类会在构建时被直接剔除，自然不会出现在最终的样式文件里。p-2.5本身是Tailwind默认主题内置的间距类，对应0.625rem的内边距，不存在默认值缺失的问题，它未生效纯粹是被Purge规则误删。另外你配置里future节点下的两个标志，是Tailwind v2时期的预启用特性开关，在当前最新版本里已经是默认生效的内置逻辑，保留反而可能引发编译兼容异常。

对齐CDN效果的调整步骤 #

• 检查编译入口的Tailwind核心指令：确保项目全局入口CSS文件正确写入三个Tailwind编译指令，这是保证三层样式（基础重置、组件、工具类）正常生成的前提：

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

  其中@tailwind base负责加载Preflight重置样式，漏写就会出现浏览器默认样式暴露的问题。
• 修正Purge扫描范围：把所有包含Tailwind类名的源文件路径都加入扫描配置，不要仅保留PHP模板路径，示例配置如下：

  purge: [
    './src/**/*.html',
    './src/**/*.js',
    './templates/**/*.php',
  ]
  

• 清理废弃的旧版配置项：把配置里的future节点整体删除，避免旧版特性开关和最新版本的内置逻辑冲突。
• 校验PostCSS编译链路：确保webpack流程里的PostCSS配置正确挂载了tailwindcss和autoprefixer插件，且插件加载顺序正确，避免因流程错误跳过Tailwind编译环节。

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