配置Tailwind：文档字体为14px时保持16px基准字号

核心问题分析 #

Tailwind默认以根元素16px字号为基准计算所有rem单位的样式，当嵌入到根字号为14px的环境中，所有基于rem的尺寸、内边距等都会按比例缩小（14/16=0.875倍），导致样式不符合预期。以下是无需修改原有类名的通用解决方案：

方案1：容器级重置rem基准（无需重构应用） #

直接在Vue应用的根容器（如<div id="app">）上设置字体大小，让容器内部的rem等价于原16px基准的rem：

#app {
  /* 计算逻辑：(原基准字号 / 当前根字号) * 100%，确保容器内1rem = 16px */
  font-size: calc(16 / 14 * 100%);
}

这个方案无需修改任何Tailwind配置或业务代码，仅需一行CSS即可让所有原有类名的样式效果和原环境完全一致。

方案2：修改Tailwind配置适配新基准（推荐可重构场景） #

如果可以重新构建Vue应用，直接在tailwind.config.js中调整主题变量的基准比例，让所有基于rem的样式自动适配14px根字号：

module.exports = {
  theme: {
    // 重写字号系统，将原16px基准的rem值转换为14px基准的对应值
    fontSize: Object.fromEntries(
      Object.entries(require('tailwindcss/defaultTheme').fontSize).map(([key, value]) => {
        // 提取原rem数值，乘以比例(16/14)后重新生成样式值
        const remValue = value.match(/(\d+\.?\d*)rem/)[1];
        return [key, `calc(${remValue} * 16 / 14 * 1rem)`];
      })
    ),
    // 重写间距系统（包含padding、margin、width等依赖spacing的样式）
    spacing: Object.fromEntries(
      Object.entries(require('tailwindcss/defaultTheme').spacing).map(([key, value]) => {
        return [key, `calc(${value} * 16 / 14)`];
      })
    ),
  },
};

重构后，所有原有Tailwind类名的实际像素尺寸会和原16px根字号环境完全一致，且符合Tailwind的配置规范，后续维护更便捷。

方案选择建议 #

• 若无法重新构建应用，优先使用方案1，实现成本最低；
• 若可以重构应用，优先使用方案2，从配置层面彻底解决适配问题，避免后续样式冲突。

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