如何在Nuxt3中正确配置TailwindCSS默认字体？

1. 确认Tailwind配置文件的正确位置 #

不要修改nuxt/目录下自动生成的tailwind.config.cjs——这个文件是模块自动生成的，dev服务重启或热更新时会被覆盖，所有自定义配置都应该放在项目根目录的tailwind.config.ts（推荐）或tailwind.config.js中。

2. 编写正确的Tailwind配置代码 #

注意必须先导入defaultTheme，否则你的代码里defaultTheme会是未定义变量，直接导致字体配置不生效：

import type { Config } from 'tailwindcss'
import defaultTheme from 'tailwindcss/defaultTheme'

export default <Config>{
  theme: {
    extend: {
      fontFamily: {
        sans: ['Proxima Nova', ...defaultTheme.fontFamily.sans],
      },
    },
  },
}

如果使用JS格式的配置文件：

/** @type {import('tailwindcss').Config} */
const defaultTheme = require('tailwindcss/defaultTheme')

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

3. 引入Proxima Nova字体 #

本地字体场景 #

• 在项目assets/fonts目录下放入你的字体文件（如ProximaNova-Regular.woff2、ProximaNova-Bold.woff2等）
• 新建assets/css/main.css文件，添加字体声明：

@font-face {
  font-family: 'Proxima Nova';
  src: url('../fonts/ProximaNova-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('../fonts/ProximaNova-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

• 在nuxt.config.ts中配置全局CSS引入：

export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss'],
  css: ['~/assets/css/main.css'],
})

在线字体场景 #

如果使用供应商提供的在线字体链接，直接把链接添加到nuxt.config.ts的页面头部配置中：

export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss'],
  app: {
    head: {
      link: [
        {
          rel: 'stylesheet',
          href: '你的Proxima Nova在线字体链接'
        }
      ]
    }
  }
})

4. 验证配置 #

重启Nuxt dev服务，打开浏览器开发者工具查看元素的font-family属性，应该会显示Proxima Nova, ui-sans-serif, system-ui, ...的字体栈。

内容的提问来源于stack exchange，提问作者Artur Müller Romanov