按Tailwind文档配置自定义字体后，编译生成的CSS为何缺少font-body类？

核心问题点1：CSS导入规则不符合规范 #

• CSS 语法要求 @import 必须放在样式文件的最顶部，不能出现在其他CSS规则之后。你当前把Google Fonts的导入代码夹在 @tailwind base 和 @tailwind utilities 中间，编译时Tailwind会把这两个指令替换成完整的样式块，导致导入规则落在了大量已存在的CSS规则后面，浏览器会直接忽略这个位置不合法的导入，字体根本加载不出来。
• 你从Google Fonts网页复制的导入链接带有 & 这种HTML实体转义字符，在纯CSS文件中不需要这类转义，直接把所有 & 替换成 & 即可，否则请求的字体URL是错误的，会返回404。

修正后的 styles.css 正确结构：

/* 导入规则必须放在文件最顶端 */
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&family=Lato:wght@300;400;700;900&family=Roboto:wght@400;500;700&family=Rubik:wght@400;500;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

核心问题点2：Tailwind配置结构错误 #

• 自定义字体需要放在 theme.extend 层级下，不能直接写在 theme 的根层级。直接写在theme根层级的 fontFamily 会完全覆盖Tailwind默认的整套字体工具配置，不是扩展自定义配置的正确方式。
• 如果你使用的是 Tailwind v3 版本，旧版的 purge: [] 配置已经被彻底废弃，v3 替换为 content 字段来指定需要扫描的文件路径。没有正确配置 content 字段的话，Tailwind 是按需生成类的，因为扫描不到任何需要使用类的文件，不会凭空生成 font-body 这类自定义工具类，这也是最终编译文件里找不到字体类的核心原因。

修正后的 tailwind.config.js 关键配置：

module.exports = {
    // 替换旧版purge配置为content，填写你实际的项目文件路径
    content: ["./**/*.html", "./src/**/*.{js,jsx,ts,tsx,vue}"],
    darkMode: false,
    theme: {
        extend: {
            // 把自定义字体配置移到extend内部，不覆盖默认配置
            fontFamily: {
                'body': ['Lato', 'sans-serif'],
            }
        }
    },
    variants: {
        extend: {},
    },
    plugins: [],
}

验证步骤 #

配置修正后，重新执行编译命令：

npx tailwindcss build styles.css -o output.css

检查生成的 output.css，能找到 .font-body 对应的字体规则后，在HTML元素上使用该类即可正常生效。

内容的提问来源于stack exchange，提问作者Chain Truth