Tailwind CSS中如何设置基线字体大小？-css教程-PHP中文网

text-base不是基准设定指令，而是对应font-size:1rem的普通类，不修改html根字号，因此无法全局统一字体基准；真正控制需显式设置html{font-size}。

tailwind css中如何设置基线字体大小？

Tailwind 里没有“设置基线字体大小”的独立操作，text-base 不是基准值设定指令，而是个普通类名，它只在当前元素上应用 font-size: 1rem 和 line-height: 1.5rem —— 它不改变根元素或全局默认字号。

为什么 text-base 不起“基准”作用？

很多人以为加了 text-base 就像 CSS 的 font-size: 16px 那样设定了项目“基础字号”，其实不是：text-base 只是 Tailwind 提供的一个预设类，对应固定样式声明，不会影响其他未显式设置字号的元素。浏览器仍按 html 元素的 font-size（通常为 16px）来解析 1rem，而 Tailwind 并不自动修改这个根字号。

text-base 在未覆盖的元素上不会“生效”，因为没被写进 class 列表里；它不是继承性默认值
如果你删掉所有 text-* 类，元素会回退到浏览器默认（通常是 16px），而非 text-base 的值
全局控制字号得改 html { font-size: ... }，不是靠加 text-base

如何真正统一项目字体基准？

要让 1rem 对应你想要的像素值（比如 10px 或 16px），必须显式设置根元素字号。常见做法是：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

在 @layer base 中重置 html：

@layer base {
  html {
    font-size: 62.5%; /* 使 1rem = 10px，方便 calc(1.6rem) ≈ 16px */
  }
}

或直接设绝对值（更直观，但失去缩放弹性）：
```
html {
  font-size: 16px;
}
```
避免在 body 或通用选择器里用 font-size: inherit 或 all: unset，否则可能切断 rem 继承链

text-base 和响应式断点一起用时的陷阱

写成 text-base md:text-xl 很常见，但要注意：它只是“小屏用 text-base，中屏起用 text-xl”，并不表示 text-base 是“基准”，也不代表 text-xl 是基于它的放大。两者完全独立，各自映射到不同 font-size 值。

text-base → font-size: 1remtext-xl → font-size: 1.25rem（不是 1rem × 1.25，而是固定值）
如果根字号被改过（如 html { font-size: 20px }），那 text-base 就变成 20px，text-xl 就是 25px——比例不变，但绝对值已偏移
别指望 text-base 能“校准”其他类；它自己也依赖根字号