必须用extend.fontFamily而非theme.fontFamily，否则会完全覆盖默认sans/serif/mono键，导致font-serif等类无对应声明而回退到Times New Roman；中文字体须前置加引号，sans-serif必须置末尾。
直接改 theme.fontFamily 会丢掉 font-sansfont-seriffont-mono 这些默认类，必须用 extend.fontFamily。
为什么不能直接写 theme.fontFamily
Tailwind 的默认字体族（sans、serif、mono）只在初始 theme 中定义。一旦你写成：
theme: {
fontFamily: {
sans: ['Inter', 'system-ui']
}
}
就等于完全覆盖了整个 fontFamily 对象，serif 和 mono 键彻底消失。后续用 font-serif 类时，CSS 里根本没对应声明，浏览器只能回退到系统默认字体——甚至可能渲染成 Times New Roman。
常见现象包括：
立即学习“前端免费学习笔记（深入）”；
-
font-serif不生效，<h2 class="font-serif">看起来和普通文本一样 - 控制台无报错，网络面板也没字体请求，但文字就是不变
- DevTools 里检查
font-family计算值，发现压根没展开，只显示initial或空值
正确扩展自定义字体别名（如 font-heading）
想新增一个叫 font-heading 的类，就得在 extend.fontFamily 里加键名 heading，值为字符串数组：
Pandas 配置文件报告生成器
下载
使用ydata-profiling（前身为pandas-profiling）生成全面的数据质量报告，包含相关性分析、缺失值模式和基数检测。导出交互式HTML仪表板和JSON摘要。
module.exports = {
theme: {
extend: {
fontFamily: {
heading: ['"Playfair Display"', 'Georgia', 'serif'],
mono: ['"Fira Code"', 'ui-monospace', 'monospace']
}
}
}
}
注意几个硬性约束：
- 键名必须是合法标识符：小写字母开头，只含字母/数字/短横线，比如
heading✅，'IBM Plex Sans'❌（含空格和引号，Tailwind 忽略） - 数组第一项是你要用的字体名，必须和
@font-face中的font-family值完全一致（大小写、引号、空格都不能差） - 中文字体或含空格的字体名（如
"PingFang SC"）必须加双引号，否则 CSS 解析失败 - 不要只写一个字体名，比如
['Inter']—— 浏览器找不到就直接跳到sans-serif，中间没缓冲，可能崩到 SimSun
中文字体栈怎么排顺序才不乱码
数组顺序 = fallback 优先级。中文字符渲染是否正常，取决于第一个能显示中文的字体是否排在西文字体前面。错误顺序会让 Inter 渲染中文，结果是方块或异常字形。
推荐结构（macOS / Windows / Linux 兼顾）：
sans: [ '"PingFang SC"', // macOS 简体 '"Microsoft YaHei"', // Windows 简体 '"Noto Sans CJK SC"', // Linux / 跨平台兜底 'system-ui', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif' ]
关键点：
- 中文字体必须前置，且带引号；日/韩字体（如
"Hiragino Kaku Gothic Pro"）紧随其后 -
sans-serif必须放在最后——放中间或开头会导致匹配提前终止 - 不要用
"STHeiti"或"Hiragino Sans GB"，iOS 13+ 和现代 macOS 已移除，会降级失败 - 如果项目支持繁体，只在
serif分支加"Noto Serif CJK TC"，别塞进sans里干扰简体用户
为什么配好了还是不生效
90% 的“不生效”不是配置问题，而是加载链断了：
-
@font-face没写，或写在@tailwind base之后 → 字体注册失败 -
@font-face里的font-family: "robotoMono"和 config 里robotoMono: [...]大小写不一致 → 匹配不上 - CSS 变量方式用了
"var(--font-sans)"，但:root里没定义--font-sans→ 最终值为空，浏览器跳过整条 font-family 声明 - HTML 根元素写了
style="font-family: 'Helvetica';"→ 层叠权重高于font-sans类，直接压制 - 用了
@layer base重置html字体，但写成了body→ 移动端 Safari 不继承
真正起作用的永远只有数组顺序 + @font-face 注册 + 类名拼写三者严丝合缝。缺一不可，也容不得大小写或引号偏差。
