在HTML中通过class="font-bold text-xl"可同时实现加粗（font-weight: 700）和放大字号（1.25rem/20px），二者互不影响；类顺序无关，需确保字体支持700字重且Tailwind正确加载。
直接在 HTML 标签的 class 属性里写上 font-bold 和 text-xl，用空格分隔即可：
<p class="font-bold text-xl">这段文字又大又粗</p>
这两个类互不干扰，Tailwind 会分别应用 font-weight: 700（加粗）和 font-size: 1.25rem（即 20px），最终效果是字号放大、字重加粗。
注意几个关键点：
-
font-bold对应的是font-weight: 700，不是bold关键字，也不是“强制变粗”——它依赖字体本身是否提供 700 字重。如果当前字体（比如某个自定义字体）只包含 400 和 600，浏览器会 fallback 到最接近的可用值（可能是 600），看起来不如预期粗。 -
text-xl是固定尺寸：1.25rem / 20px，属于标题级字号，适合小标题或强调段落，比text-base（默认 16px）明显更大。 - 类顺序无关紧要，
class="text-xl font-bold"和class="font-bold text-xl"效果完全一样。 - 如果同时需要响应式调整，可以组合如
md:text-2xl font-bold，但记得md:前缀必须配合基础类（比如text-xl本身已存在，md:text-2xl才会在中屏生效）。
常见问题排查：
立即学习“前端免费学习笔记（深入）”；
- 文字没加粗？打开浏览器开发者工具 → Elements → Computed → 查
font-weight的最终计算值，看是不是被父元素的!important或其他样式覆盖了。 - 字号没变化？确认 Tailwind CSS 已正确加载（CDN 或构建流程无误），且没有拼写错误（比如写成
texl-xl）。 - 想换更粗或更细的字重？可用
font-semibold（600）、font-extrabold（800）等替代font-bold；想更大字号就换text-2xl、text-3xl等。
不复杂但容易忽略
