TailwindCSS v2样式异常：mt-5显示3rem而非预期的1.25rem

1. 检查自定义间距配置 #

先打开tailwind.config.js，查看是否在theme.spacing中自定义了5的取值——这是导致mt-5显示为3rem的常见原因：

// 错误示例：覆盖了默认间距值
module.exports = {
  theme: {
    spacing: {
      '5': '3rem', // 此处将默认的1.25rem改为了3rem
    }
  }
}

若存在该情况，要么删除自定义的'5'键，要么将值改回1.25rem即可。

2. 排查全局/第三方样式冲突 #

检查项目内的全局CSS文件（如global.css）或引入的第三方UI库，确认是否存在直接覆盖.mt-5的规则：

/* 这类全局样式会覆盖Tailwind的类 */
.mt-5 {
  margin-top: 3rem !important;
}

找到冲突规则后，可选择删除该规则，或给目标元素添加自定义类，通过组合选择器提升优先级：

<div class="card mt-5"></div>

.card.mt-5 {
  margin-top: 1.25rem;
}

3. 调整样式加载顺序 #

确保Tailwind的样式在全局CSS和第三方样式之后导入。以项目入口文件为例：

// 先导入全局/第三方样式
import './global.css';
// 再导入Tailwind的基础、组件、工具类
import './tailwind.css';

这样Tailwind类的优先级会高于之前加载的样式。

4. 使用Tailwind的优先级变体 #

如果仅个别元素存在冲突，无需全局开启important: true，直接给类添加!前缀即可强制提升优先级：

<div class="!mt-5"></div>

该方法更精准，不会影响所有Tailwind类的优先级。

5. 验证Content配置并清除缓存 #

检查tailwind.config.js的content字段，确保其包含所有使用Tailwind类的文件路径——若配置不全，Tailwind可能无法正确生成所需类，导致加载旧缓存样式：

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx,vue}",
    "./public/index.html",
  ],
  // 其他配置
}

修改后重新构建项目，并清除构建缓存。

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