Nuxt3中配置Tailwind CSS默认字体不生效，如何解决？

问题场景 #

在Nuxt3项目中安装@nuxtjs/tailwindcss后，尝试将Montserrat设置为默认无衬线字体，但配置后字体未生效。现有配置如下：

Tailwind 配置文件（tailwind.config.js）：

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
      fontFamily: {
        sans: ['Montserrat',...defaultTheme.fontFamily.sans]
      },
  },
};

字体定义文件（CSS）：

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: normal;
    src: local('./Montserrat-Regular.ttf'),
    url('./Montserrat-Regular.ttf') format('ttf');
}

排查与解决步骤 #

1. 修正@font-face的路径与格式错误

• local() 参数应为字体的系统名称（如'Montserrat'），而非本地文件路径，它用于优先加载系统中已安装的字体；
• url() 需确保路径正确：如果字体文件放在assets/fonts目录下，应使用Nuxt的路径别名~/assets/fonts/Montserrat-Regular.ttf；
• format() 的值应为'truetype'（对应.ttf格式），而非'ttf'；
• 建议添加font-display: swap优化字体加载体验。

修正后的@font-face：

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400; /* 明确对应normal权重 */
    src: local('Montserrat'),
         url('~/assets/fonts/Montserrat-Regular.ttf') format('truetype');
    font-display: swap;
}

2. 确保字体样式文件被项目正确引入

在nuxt.config.ts中配置全局CSS引入，确保字体定义被加载：

export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss'],
  css: ['~/assets/css/fonts.css'] // 替换为你的字体样式文件路径
})

3. 调整Tailwind配置的写法

直接覆盖theme.fontFamily会替换整个字体配置，建议使用extend来扩展默认配置，避免丢失其他字体族设置：

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Montserrat', ...defaultTheme.fontFamily.sans]
      },
    },
  },
};

4. 清除缓存并验证

• 重启Nuxt开发服务，清除构建缓存；
• 在浏览器中强制刷新页面（Ctrl+Shift+R），避免浏览器缓存旧资源；
• 可手动为页面元素添加font-sans类，验证字体是否生效。

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