Tailwind 中 `text-sm` 默认是 14px 吗？如何确认和自定义？

Question

**问题：** Tailwind CSS 中 `text-sm` 默认确实是 14px 吗？如何准确确认其实际值？又该如何安全地自定义（例如改为 13px 或适配设计系统）？常见误区是直接覆盖 `.text-sm` 类，但可能破坏响应式断点（如 `sm:text-sm`）或与 `fontSize` 配置脱节。此外，在启用 `prefers-reduced-motion` 或使用 `rem` 基准时，该值是否仍为绝对 14px？若项目根字体设为 `16px`，`text-sm` 是基于 `1rem = 16px` 计算的相对值（即 0.875rem ≈ 14px），还是硬编码像素？如何通过 `tailwind.config.js` 的 `theme.fontSize` 精确修改而不影响其他尺寸层级？验证时应检查生成的 CSS、浏览器计算样式（Computed Tab），还是运行时 `getComputedStyle()`？

Answer 1

```html

一、基础确认：text-sm 的默认值来源与本质

Tailwind CSS 的 text-sm 并非硬编码 14px，而是基于相对单位的计算结果。其默认定义位于源码 src/public/colors.js（v3.4+）及核心 theme 配置中：0.875rem —— 即 7/8 rem。当根元素（:root）字体大小为标准 16px 时，0.875rem × 16px = 14px。因此，“14px”是**派生值（derived value）**，而非绝对像素声明。

二、验证路径：三层交叉校验法

• ① 源码级：查阅 Tailwind 默认配置，可见 fontSize: { sm: ['0.875rem', { lineHeight: '1.25' }] }
• ② 构建级：运行 npx tailwindcss -o ./dist/tailwind.css --minify，检查输出 CSS 中 .text-sm 是否为 font-size: 0.875rem
• ③ 运行时级：执行 getComputedStyle(document.body).fontSize（得 root 值），再对任意含 text-sm 元素调用 getComputedStyle(el).fontSize（返回解析后绝对像素值）

三、响应式与无障碍兼容性分析

场景	text-sm 行为	是否受影响
html { font-size: 16px; }	0.875rem → 14px	否（基准一致）
html { font-size: 12px; }	0.875rem → 10.5px	否（自动缩放）
@media (prefers-reduced-motion: reduce)	无直接干预；但若搭配 motion-safe: 则保留	否（font-size 不属 motion 属性）

四、安全自定义方案：精准修改 fontSize 而不破坏生态

✅ 正确做法：在 tailwind.config.js 中扩展 theme.fontSize，保持键名语义与断点继承：

module.exports = {
  theme: {
    extend: {
      fontSize: {
        sm: ['0.8125rem', { lineHeight: '1.25' }], // = 13px @16px root
        // 注意：保留数组结构以维持 line-height、letter-spacing 等衍生属性
      }
    }
  }
}

⚠️ 错误做法：全局覆盖 .text-sm { font-size: 13px !important; } —— 将导致 sm:text-sm、md:text-sm 等响应式变体失效，且脱离 Tailwind 的插件系统（如 @tailwindcss/typography）。

五、深度验证流程图（Mermaid）

graph TD
  A[启动验证] --> B{检查 tailwind.config.js}
  B -->|存在 fontSize.sm 定义| C[生成 CSS 并 grep .text-sm]
  B -->|未重写| D[查默认配置源码]
  C --> E[浏览器 Elements → Computed Tab]
  D --> E
  E --> F[运行 getComputedStyle(el).fontSize]
  F --> G{是否等于预期 px？}
  G -->|是| H[✅ 通过]
  G -->|否| I[排查 root font-size / CSS scope / cache]

六、进阶实践：设计系统对齐策略

当对接 Figma 设计规范（如 13px 主文本）时，推荐采用「比例映射法」：

1. 确定设计系统基准：假设 UI 标注为 13px / 16px = 0.8125
2. 在配置中统一缩放所有 fontSize：sm: '0.8125rem', base: '1rem', lg: '1.125rem'
3. 启用 corePlugins: { fontSize: true } 确保插件链完整
4. 配合 plugin(({ addUtilities }) => { ... }) 注入设计系统专属 token（如 text-ui-body）

七、常见误区与反模式警示

• ❌ 认为 text-sm 是“固定像素”，忽略 rem 的动态性
• ❌ 在 CSS 中用 !important 覆盖类名，切断响应式断点注册机制
• ❌ 修改 fontSize.sm 时省略 lineHeight 对象，导致行高错乱
• ❌ 忽略 content 或 iframe 子上下文中的 root font-size 隔离效应

```