Tailwind主题配置中带空格的自定义fontFamily不生效如何解决

• 类名调用错误：你在JSX中写的 font-Work Sans 会被HTML解析为两个独立的类 font-Work 和 Sans，和实际需要的字体工具类完全不匹配。
• 配置项命名不合理：你在fontFamily中给带空格的字体设置的key为'"Work Sans"'，包含引号和空格，Tailwind基于这个key生成的工具类为font-"Work Sans"，这类带特殊字符的类名无法直接在className中正常识别使用。

1. 首先修改tailwind.config.js中的fontFamily配置，将key简化为无空格、无特殊字符的命名，仅在值部分保留带引号的字体名即可：

module.exports = {
  // 其他配置保持不变
  theme: {
    fontFamily: {
      inter: ["Inter"],
      'work-sans': ['"Work Sans"'],
      'open-sans': ['"Open Sans"'],
      montserrat: ["Montserrat"],
    },
    // 其他theme配置保持不变
  }
}

2. 调整JSX中的className调用，使用简化后key对应的工具类：

<button className="w-40 h-12 bg-secondary rounded-lg font-semibold font-work-sans text-xl">
  Get a quote
</button>

3. 校验生效：修改完成后重启开发服务，打开浏览器控制台检查对应元素，确认已正确应用font-family: "Work Sans"样式。同时需要确认你已在项目全局正确引入了Work Sans字体资源（比如通过Google Fonts的link标签、或者本地字体文件的@font-face声明），未引入字体资源也会导致样式不生效。

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