TailwindCSS提供字体族、字号、行高、字重等工具类,可快速美化文本;使用font-sans统一正文风格,搭配text-base、leading-relaxed提升阅读体验,结合font-bold、uppercase等类增强层次与布局,保持样式一致即可实现专业排版。

想让网页的段落和标题看起来更美观,又不想写一堆 CSS?TailwindCSS 提供了一整套字体相关的工具类,能让你快速调整文字样式,无需自定义代码。合理使用这些类,能让内容排版立刻提升一个档次。
选择合适的字体家族
Tailwind 默认提供几种常用的字体族控制,帮你统一页面风格:
- font-sans:设置无衬线字体,现代简洁,适合大多数网页
- font-serif:有衬线字体,适合标题或文艺类内容
- font-mono:等宽字体,适合代码片段或技术文档
一般正文用 font-sans 即可,比如: 这是一段清晰的文字
设置合理的字号与行高
字号和行高直接影响阅读体验。Tailwind 提供从 xs 到 9xl 的字号类:
- text-sm、text-base、text-lg:分别用于小说明文、正文、稍大正文
- text-xl 到 text-6xl:适合各级标题(h1 ~ h6)
- leading-relaxed、leading-loose:增加行高,让段落更易读
推荐组合: 段落内容,舒适阅读主标题
控制字重与样式
通过字重突出重点,增强层次感:
立即学习“前端免费学习笔记(深入)”;
- font-thin 到 font-black:100 ~ 900 字重,bold 常用为 700
- font-normal:正常字重(400),适合正文
- italic:斜体,可用于引用或强调
例如标题加粗,关键句强调:
重要提示
对齐与大小写控制
微调文本布局也很关键:
- text-left、text-center、text-right:文本对齐方式
- text-justify:两端对齐,适合长段落
- uppercase、lowercase、capitalize:控制字母大小写
比如导航标题全大写:关于我们
基本上就这些。Tailwind 的字体工具类覆盖了日常所需,组合使用就能让文字看起来专业又舒服,不需要额外写 CSS。关键是保持一致性,别在一个页面里用太多不同字号和字重。











