React+Tailwind项目Arial字体局部设置无效问题及相关疑问

一、修正字体配置错误 #

你当前的Tailwind配置存在两个关键问题：

• 字体族的键名不需要带font-前缀：Tailwind会自动为配置的字体族生成font-xxx格式的工具类，你写的font-Arial会生成font-font-Arial这种无效类名。
• 缺少系统 fallback 字体：Arial并非所有系统都默认预装，补充通用无衬线字体作为备选能提升兼容性。

修改后的tailwind.config配置：

extend: {
  fontFamily: {
    arial: ["Arial", "sans-serif"],
  },
}

然后在组件中使用正确的工具类：

<p className="font-arial">Lorem Lorem Lorem</p>

二、关于body默认font-family的处理 #

不需要删除index.css中body标签的默认font-family。Tailwind的工具类优先级高于标签选择器样式，font-arial会自动覆盖body上的全局字体设置。除非你给body的font-family添加了!important（不推荐这种写法），否则无需调整全局样式。

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