必须用 extend.fontFamily 而非直接覆盖 theme.fontFamily，否则 font-serif、font-mono 类失效；中文字体名需加双引号且与 @font-face 完全一致；务必保留原生 fallback 链并确保字体文件正确加载。
tailwind.config.js 里必须用 extend.fontFamily，不能写 theme.fontFamily
直接覆盖 theme.fontFamily 会导致 font-serif、font-mono 类彻底失效——Tailwind 的默认字体族（sans、serif、mono）只在初始 theme 中定义，一覆盖就全丢。结果是：类名还在，但生成的 CSS 里根本没有对应规则，浏览器回退到 Times New Roman 或系统默认字体。
正确做法是在 extend.fontFamily 下仅重写需要变更的项，保留其他默认键：
module.exports = {
theme: {
extend: {
fontFamily: {
sans: ['"Inter"', 'ui-sans-serif', 'system-ui', 'sans-serif'],
serif: ['Georgia', 'ui-serif', 'serif'],
mono: ['Fira Code', 'ui-monospace', 'monospace']
}
}
}
}
- 中文字体名（如
"Noto Sans SC"、"IranSans"）必须加双引号，且大小写、空格要和@font-face中声明的font-family完全一致 - 数组第一项是自定义字体，后续必须保留 Tailwind 原生 fallback 链（如
ui-sans-serif），否则加载失败时布局可能偏移或字体密度突变 - 不要删掉
serif或mono——哪怕你不用，也得留着，不然font-serif类会直接失效
@font-face 或 @import 没加载，配置再对也没用
Tailwind 只生成 font-family 声明，不负责加载字体文件。漏掉这步，font-sans 就永远卡在 fallback 上。
推荐在项目主 CSS 入口（如 src/index.css）顶部，@tailwind base 之前引入：
立即学习“前端免费学习笔记（深入）”；
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
- 如果用本地字体，确保
@font-face中的font-family值（如"IranSans"）和配置里写的完全一致 - 路径要能被构建工具解析，比如
url('./fonts/IranSans.woff2')要相对于该 CSS 文件位置 - 检查 DevTools 的 Network 标签页，确认字体文件返回 200，且没有 CORS 报错
全局生效 ≠ 改 html 元素，而是靠 Preflight 默认行为
Tailwind 的 @tailwind base（即 Preflight）已将 font-sans 设为 html、body、h1–h6、p 等元素的默认字体。所以只要正确配置了 theme.extend.fontFamily.sans，无需额外操作，所有未显式指定字体的元素都会自动继承。
别在 @layer base 里手动给 html 加 @apply font-sans——这多余，还可能干扰 Preflight 的重置逻辑。
- 想验证是否生效？打开 DevTools，选一个普通
<p>，看 computed tab 里的font-family是否以你的自定义字体开头 - 如果看到的是
system-ui或sans-serif，说明字体文件没加载成功，或配置里的字体名拼错了 - 注意：Preflight 不会应用到第三方组件内部的元素（比如 React 组件里没加 class 的
<span>），它们仍依赖父级继承
RTL 或多语言场景下，别试图用断点切换字体族
Tailwind 不支持 md:font-arabic 这种响应式字体类——fontFamily 映射不响应屏幕尺寸。多语言字体切换应靠逻辑属性 + 字体栈设计实现。
例如中文用户优先用 "Noto Sans SC"，阿拉伯语用户优先用 "Tajawal"，都放在同一字体栈里，由浏览器按当前语言环境自动选择：
sans: ['"Noto Sans SC"', '"Tajawal"', 'ui-sans-serif', 'sans-serif']
- 字体栈顺序决定 fallback 行为，把最常用的语言字体放最前
- 配合
dir="rtl"触发rtl:变体，而不是靠 JS 切 class - 如果项目需强隔离（比如中英混排时中文字体必须用思源黑体、英文字体必须用 Inter），就得拆成两个独立字体族（
chinese和latin），再用@layer utilities手动定义新工具类
"IranSans"，但 @font-face 里声明的是 iransans（小写）或 "Iran Sans"（带空格），就会导致整个字体链断裂——此时控制台不会报错，但 computed font-family 里根本看不到你写的那个名字。 
