为何Edge/Chrome中TailwindCSS字体大小显示不准确？

1. 根元素字体大小被篡改 #

Tailwind的text-*和p-*类全靠rem单位计算，默认基准是<html>的16px。比如：

• text-7xl默认是4.5rem，4.5×16=72px（你预期的数值）
• text-6xl默认是4rem，4×16=64px

要是你项目里改了根元素的字体大小，比如加了这段全局CSS：

html {
  font-size: 112.5%; /* 等于18px */
}

那算出来就是4.5×18=81px（正好是你看到的实际值）；如果根元素字体是16.875px（对应105.46875%），text-6xl就会显示67.5px。padding异常也是同一个道理——rem基准变了，所有基于rem的间距都会跟着偏移。

2. Tailwind配置被自定义修改 #

去检查你的tailwind.config.js，要是在theme.fontSize或者theme.extend.fontSize里自定义了7xl、6xl的值，比如把rem值改大了，或者直接写死了错误的px值，也会出现这种显示偏差。

3. 全局CSS优先级覆盖 #

如果页面里有其他全局样式规则，比如：

div {
  font-size: 1.1em !important;
}

这种规则会直接盖过Tailwind的类样式，强制放大字体或改变间距。

排查解决步骤 #

1. 先检查全局CSS，把<html>的font-size改回默认的16px或者100%。
2. 用浏览器开发者工具选中文本元素，查看「计算样式」面板里的font-size，能直接看到是哪个CSS规则在生效，精准定位问题来源。
3. 核对tailwind.config.js里的fontSize配置，确保没篡改默认的text-*类值。

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