直接用 clamp() 配合 extend.fontsize 即可实现流体字号，无需插件或 js，但须将字体配置置于 theme.extend.fontfamily 下、确保 content 包含使用路径、fontsize 数组中显式定义 lineheight、避免混用断点类与 text-fluid。

直接用 clamp() 配合 extend.fontSize 就能实现，不需要插件、不依赖 JS，但必须避开 theme.fontFamily 覆盖陷阱和 JIT 扫描盲区。

为什么 text-fluid 类没生效？

最常见原因是把字体配置写在了 theme.fontFamily 顶层，而不是 extend.fontFamily 下——这会导致默认的 font-serif、font-mono 全部失效，连带自定义类也无法生成。

• ❌ 错误写法：theme: { fontFamily: { fluid: ['clamp(1rem, 4vw + 0.8rem, 2rem)'] } } → Tailwind 完全忽略该声明，也不报错
• ✅ 正确位置：必须放在 theme.extend.fontFamily 里，例如：extend: { fontFamily: { fluid: ['clamp(1rem, 4vw + 0.8rem, 2rem)'] } }
• 确保 content 配置已包含你实际使用该类的文件路径，否则 JIT 模式根本不会生成对应 CSS

如何让流体字号支持 line-height 自动适配？

Tailwind 的 fontSize 工具类默认会联动行高，但 clamp() 值需显式绑定，否则行高固定不变，小屏时文字挤在一起。

OpenGemini Next.js Bestpractice Builder

使用固定的 Next.js/Tailwind/Prisma 技术栈构建并记录独立 SaaS 项目，仅将 FastAPI 用于 Python 工作负载，并遵循严格的架构规范。

下载

• 在 extend.fontSize 中传入数组而非字符串：'fluid': ['clamp(1rem, 4vw + 0.8rem, 2rem)', { lineHeight: '1.4' }]
• 不要写成 lineHeight: 'clamp(1.2, 0.02vw + 1.3, 1.6)' —— Tailwind 不支持对 line-height 做流体计算，只接受静态值
• 若需更精细控制（如标题 vs 正文不同行高），建议拆成两个类：text-fluid-heading 和 text-fluid-body，分别配置

响应式断点下怎么避免流体字号“打架”？

别混用 sm:text-xl 和 text-fluid —— Tailwind 不会合并它们，后者会被前者覆盖，最终失去流体行为。

• 流体字号本身已是响应式，无需再叠加断点类；如果真要分段控制（比如移动端用一套 clamp，桌面端换另一套），得定义多个键：fluid-mobile、fluid-desktop，再配合 sm:font-fluid-mobile md:font-fluid-desktop
• 注意：sm: 等前缀只作用于类名是否启用，不改变 clamp() 内部的 vw 计算基准 —— 它始终基于视口宽度，不是容器宽度
• 若容器宽度受限（如 max-w-3xl），clamp() 仍按整个 viewport 计算，可能造成视觉脱节；此时应改用 container + width + calc() 组合，而非纯 vw

真正麻烦的从来不是写对 clamp()，而是字体栈 fallback 是否匹配、dir="rtl" 切换时是否同步更新字体别名、以及 SSR 渲染时服务端无法读取 viewport 导致首屏字体错位 —— 这些都得靠 HTML 层或自定义属性兜底，不是加个类就能解决的。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！