必须用 extend.fontfamily 扩展字体，保留默认键名（如 sans/serif/mono），自定义键名需匹配 class（如 heading → font-heading），字体名加引号并含通用备选字体，且须手动加载字体文件。
如何在 tailwind.config.js 中正确扩展 fontFamily
直接修改 theme.fontFamily 的默认值不会覆盖原有字体，必须用 extend 显式追加。否则自定义字体根本不会出现在生成的 CSS 中。
常见错误是写成：
theme: { fontFamily: { sans: ['Inter', 'system-ui'] } }——这会彻底丢掉 Tailwind 原生的 sans、serif、mono 定义，导致 font-sans 失效。
- 务必使用
extend.fontFamily，保留默认字体族映射 - 键名要与你后续使用的 class 名一致（如
font-heading对应heading） - 每个字体名必须是字符串，含空格的字体（如
'Segoe UI'）要加单引号包裹 - 最后一定要加通用备选字体，例如
'system-ui'或'sans-serif'，否则在缺失字体时渲染异常
加载自定义字体文件（如 Google Fonts）的必要步骤
Tailwind 不处理字体文件加载，只生成 class。漏掉 @import 或 <link> 就算配置对了也看不到效果。
- 推荐用
@import写在src/styles.css顶部（早于@tailwind base）：@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); - 若用本地字体，需配合
@font-face声明，并确保路径正确、格式覆盖主流浏览器（.woff2优先） - 字体
font-weight和font-style要和实际加载的变体匹配，否则font-medium可能回退到普通粗细
为什么 font-[family-name] 类没生效？检查这三点
类名生成逻辑严格依赖配置键名，大小写、连字符、空格都影响结果。
- 配置中键为
heading→ class 是font-heading；键为'my-font'→ class 是font-my-font（不是font-[my-font]） - 如果用了带空格或特殊字符的键名（如
'IBM Plex Sans'），Tailwind 会忽略——只接受 ASCII 字母、数字、短横线 - 执行
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch后，检查输出 CSS 是否真包含对应font-family声明，避免缓存或构建未触发
响应式字体族切换的实用写法
不能直接对 fontFamily 写断点，但可以用插件或变通方式实现不同屏幕用不同字体族。
- 最简方案：在
extend.fontFamily里定义多个字体族（如headingSm,headingLg），再配合md:font-headingLg手动切换 - 进阶做法：用
addUtilities注册带断点的 font-family 工具类，例如：addUtilities({ '.font-heading-sm': { 'font-family': '"Inter", system-ui' }, '.md\:font-heading-lg': { 'font-family': '"IBM Plex Sans", system-ui' } }) - 注意转义：CSS 类中含
:时，JS 对象 key 需写成'.md\:font-heading-lg'，否则会被当作嵌套对象解析
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
