流体排版需用 clamp() 实现连续响应，而非 tailwind 默认断点类；须在配置中扩展 fontsize 并配套调整行高、间距等，避免布局错乱。
流体排版（Fluid Typography）在 Tailwind 中无法靠内置类直接实现，必须手动扩展 theme.fontSize 或用 clamp() + 自定义类。 Tailwind 默认的 text-sm 到 text-9xl 都是固定值，不随视口缩放；所谓“响应式字号”只是断点切换，不是连续流体变化。
为什么 sm:text-lg md:text-xl 不算流体排版
这类写法只是在几个离散断点切换字号，中间区间完全空白。比如从 640px 到 768px 之间，字号卡死在 text-lg（1.125rem），不会平滑过渡。真实流体排版要求字号随 100vw 连续变化，例如从 1rem → 1.5rem 线性增长。
- 断点类本质是媒体查询，不是计算式，无法表达斜率或区间插值
- 多个断点叠加反而可能造成字号跳变（如
md:text-xl lg:text-2xl在 1024px 处突增） - 无障碍场景下，用户缩放页面时，固定 rem 值会脱离系统字体设置，而
clamp()可保留相对性
用 clamp() 手写流体字号类（推荐）
Tailwind 本身不提供 clamp() 工具类，但你可以安全地在 HTML 中内联使用，或在 tailwind.config.js 里注册自定义类。关键是要理解三个参数含义：clamp(min, preferred, max) —— 浏览器取三者中适配当前视口的值。
-
min：最小字号（通常设为固定 rem，如1rem），防止小屏过小 -
preferred：核心表达式，常用1.25rem + 0.5vw或clamp(1rem, 4vmax, 2.5rem) -
max：上限保护（如2.5rem），避免大屏失控 - 别用
vmin/vmax做正文——它们随窗口宽高变化，横屏手机可能突然放大标题
示例（直接写在 class 属性里）：<h1 class="font-bold" style="font-size: clamp(1.125rem, 4vw, 3rem);">标题</h1>
在 tailwind.config.js 中注册流体字号（适合复用）
如果你有多个组件需要统一的流体字号规则（如所有 h2 都走同一段 clamp），就在配置里扩展 fontSize，并确保启用 plugins: [require('@tailwindcss/typography')]（非必需，但有助于类型检查）。
- 必须用
theme.extend.fontSize，不能覆盖默认fontSize，否则会丢失text-sm等基础类 - 值要写成数组形式：
['clamp(1rem, 2.5vw, 2rem)', { lineHeight: '1.2' }]，第二个对象可选配行高 - 生成的类名就是你定义的 key，比如
text-fluid-h1，而非自动拼接text-clamp-... - 注意构建工具是否支持 CSS 函数解析：Vite 4+、Webpack 5+ 没问题；旧版 PostCSS 可能需加
postcss-preset-env
配置片段：
module.exports = {
theme: {
extend: {
fontSize: {
'fluid-h1': ['clamp(1.25rem, 4.5vw, 3.5rem)', { lineHeight: '1.1' }],
'fluid-p': ['clamp(1rem, 1.5vw, 1.25rem)', { lineHeight: '1.6' }],
}
}
}
}
流体排版最容易被忽略的副作用
字号变了，但行高、字间距、容器内边距往往没同步调整，结果是文字“浮”在容器里或换行错乱。特别是当 clamp() 导致字号在某个断点附近快速变化时，line-height 的固定值会立刻暴露问题。
- 永远不要只调
font-size：配套设leading-tight或自定义line-height: clamp(...) - 图片、图标等内联元素若用
em单位，会随流体字号缩放——这有时是优点，有时是 bug，得显式重置height: 1em或用px - 按钮内的文字流体化后，
padding若仍用固定py-2，可能导致小屏按钮文字溢出，建议改用py-[0.5em]或配合min-w-保底 - 服务端渲染（SSR）框架如 Next.js，在 hydrate 前可能用默认字号渲染，造成闪动，需加
useEffect或forceLayout补偿
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
