Tailwind CSS配置Google Fonts自定义字体类未加载到样式表

自定义字体类未被编译的核心错误是tailwind.config.js配置结构异常：顶层theme字段下重复嵌套了一层theme字段，Tailwind无法读取你定义的fontFamily、自定义色值等扩展配置，对应自定义工具类不会被生成。

• 修正tailwind.config.js结构，删除多余的嵌套theme层，将所有主题配置直接放在顶层theme字段下。注意你之前写在heading字体 fallback 列表里的modern不属于标准通用字体族，无实际作用，可直接删除。修正后的完整配置如下：

module.exports = {
  content: ["**/*.{html,js,php}"],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    extend: {
      fontFamily: {
        'heading': ['Quicksand', 'sans-serif'],
        'flow': ['Quicksand', 'sans-serif'],
      },
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
  corePlugins: {
    aspectRatio: false,
  },
  plugins: [
    require('@tailwindcss/line-clamp'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('tailwind-scrollbar-hide')
  ],
}

• 重启Tailwind编译进程。--watch模式不会自动监听配置文件的变更，需要先终止当前运行的编译命令，重新执行启动指令：

yarn tailwindcss -i ./assets/css/inputstyle.css -o ./assets/css/style.css --watch

• 验证编译结果。打开输出的./assets/css/style.css文件，搜索font-heading、font-flow类名，能查到对应的font-family规则即代表配置生效，此时按Ctrl+F5强制刷新浏览器清除缓存，即可看到字体正常渲染。

如果完成上述操作后字体仍未正常加载，逐一核对以下点：

• 确认content扫描路径覆盖了所有写有Tailwind类名的文件。当前配置的通配符默认递归匹配所有子目录下的html/js/php文件，如果你的项目存在特殊目录结构，可以补充更明确的扫描路径避免漏扫：

content: [
  "./**/*.{html,js,php}",
  "./pages/**/*.php",
  "./includes/**/*.php"
]

• 确认字体资源可正常加载。你当前通过CSS @import引入谷歌字体，若本地网络无法访问字体服务器，会导致字体加载失败，可将字体引入改为直接在index.php的<head>标签内写入字体链接，或替换为本地托管的字体文件。
• 不要手动修改编译输出的style.css文件，所有自定义样式需写入入口文件inputstyle.css，避免watch模式编译时覆盖手动改动。

内容的提问来源于stack exchange，提问作者Timo Angst