TailwindCSS无法修改默认字体问题求助

TailwindCSS 官方文档对修改全局默认字体的说明很明确：

为方便起见，Preflight 会将 html 元素的字体族设置为你配置的无衬线字体，因此修改项目默认字体的一种方式是在 fontFamily 配置中自定义 sans 键。

我曾在从零搭建的 Vite/Vue3 项目中，通过两步成功将默认字体改为 Nunito：

• 在主页面 App.vue 中导入字体：

<style>
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&display=swap');
</style>

• 在 tailwind.config.js 中配置：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Nunito', 'sans-serif'],
      }
    },
  },
  plugins: [],
}

但在一个已经开发了一段时间的同类型项目中，按相同操作修改默认字体却未生效。我试过清缓存、重启项目、更换浏览器，都没用。调试时给 App.vue 的 div 直接设置 font-family:'Nunito' 是有效的，说明字体已经加载，但 html 元素的计算字体仍是 Preflight 的默认值：

font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

请问我是不是遗漏了什么步骤？

可能的原因及解决办法 #

1. 配置位置错误，仅扩展未替换默认字体 #

你当前在 theme.extend.fontFamily 下配置 sans，这只会扩展默认字体列表，而非替换。Preflight 会优先使用原生默认的 sans 配置，导致自定义字体不生效。

解决：将 sans 配置移到 theme.fontFamily 下，直接替换默认值：

theme: {
  fontFamily: {
    sans: ['Nunito', 'sans-serif'],
  },
  extend: {
    // 保留你的其他主题扩展配置
  },
},

2. 全局样式覆盖了 html 字体设置 #

项目中的全局样式文件（如 main.css、index.css）可能直接给 html/body 设置了字体，优先级高于 Tailwind Preflight。

解决：检查全局样式文件，删除或修改类似代码：

html {
  font-family: 'Nunito', sans-serif;
}

3. Tailwind 配置的 content 路径不全 #

如果 tailwind.config.js 的 content 数组未包含所有用到 Tailwind 的文件，会导致样式生成不完整，Preflight 默认字体未被正确替换。

解决：补充完整 content 路径，确保覆盖所有相关文件：

content: [
  "./index.html",
  "./src/**/*.{vue,js,ts,jsx,tsx}",
  "./src/components/**/*.vue" // 示例：添加组件目录
],

4. 第三方 UI 库的样式干扰 #

若项目引入了 Element Plus、Ant Design Vue 等第三方库，它们的全局样式可能覆盖 html 字体。

解决：要么调整第三方库样式的加载顺序，要么在全局样式中添加高优先级设置（尽量少用 !important，优先找根源）：

html {
  font-family: 'Nunito', sans-serif !important;
}

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