React项目中Tailwind CSS出现SyntaxError：'font'类不存在，如何解决？

核心问题定位 #

看你提供的index.css代码，在@layer base下的.text-gradient规则里，出现了错误的Tailwind工具类写法：

.text-gradient {
  @apply bg-gradient-to-r text-transparent bg-clip-text from-[#42A6E3] to-[#FF56F6] font bold font-primary hover:from-[#FF56F6] hover:to-[#42A6E3];
}

这里的font bold是错误写法——Tailwind中没有单独的font类，粗体样式的正确类名是font-bold（连字符命名格式），这正是触发SyntaxError的直接原因。

修复步骤 #

1. 修正错误类名
   将.text-gradient中的font bold替换为font-bold：

   .text-gradient {
     @apply bg-gradient-to-r text-transparent bg-clip-text from-[#42A6E3] to-[#FF56F6] font-bold font-primary hover:from-[#FF56F6] hover:to-[#42A6E3];
   }
   

2. 额外排查点（若修复后仍有问题）

   • 确认字体文件已引入：你在tailwind.config.js中定义了自定义字体族，但需要确保Orbitron、Rajdhani、Aldrich这些字体已通过@font-face或CDN引入项目，否则font-primary等类无法正常生效。
   • 清除缓存：重启开发服务器，或删除项目中的node_modules/.cache目录（针对Vite等构建工具），避免缓存导致样式未更新。
   • 验证content范围：确认tailwind.config.js的content字段覆盖了所有使用这些自定义类的文件，当前配置"./src/**/*.{js,jsx,ts,tsx}"是合理的，若有.html等其他文件类型可补充进去。

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