Tailwind CSS自定义字体族无法生效的问题求助

嘿，我仔细看了你的问题和配置文件，发现问题出在tailwind.config.js的结构错误上，这直接导致你的自定义字体族配置没有被Tailwind正确识别，所以不会生成对应的.font-display、.font-body、.font-monospace这些工具类。

问题核心：配置结构嵌套错误 #

你在theme.extend里面又额外嵌套了一层theme对象，这不符合Tailwind的配置规范。Tailwind只会读取theme.extend下直接定义的属性，嵌套的theme里的fontFamily和colors都不会被处理！

看你原来的配置片段：

theme: {
  extend: {
    // 这里多了一层不必要的theme嵌套！
    theme: {
      fontFamily: {
        display: ['IBM Plex Mono', 'Menlo', 'monospace'],
        body: ['IBM Plex Mono', 'Menlo', 'monospace'],
        monospace: ['Monospace2'],
      },
      colors: {
        // ...你的颜色配置
      },
    },
  },
},

修正后的配置 #

把嵌套的theme去掉，直接把fontFamily和colors放在theme.extend下面：

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  content: [
    "./src/**/*.{html,js}",
    "./node_modules/flowbite/**/*.js"
  ],
  theme: {
    extend: {
      // 直接在这里定义fontFamily和colors，不要嵌套theme
      fontFamily: {
        display: ['IBM Plex Mono', 'Menlo', 'monospace'],
        body: ['IBM Plex Mono', 'Menlo', 'monospace'],
        monospace: ['Monospace2'],
      },
      colors: {
        primary: {
          50: '#f9fafb',
          100: '#f3f4f6',
          200: '#e5e7eb',
          300: '#d1d5db',
          400: '#9ca3af',
          500: '#6b7280',
          600: '#4b5563',
          700: '#374151',
          800: '#1f2937',
          900: '#111827',
        },
        secondary: {
          50: '#f0fdfa',
          100: '#ccfbf1',
          200: '#99f6e4',
          300: '#5eead4',
          400: '#2dd4bf',
          500: '#14b8a6',
          600: '#0d9488',
          700: '#0f766e',
          800: '#115e59',
          900: '#134e4a',
        },
      },
    },
  },
  plugins: [
    require('flowbite/plugin'),
  ],
}

后续操作 #

1. 保存修正后的配置文件，重启Tailwind的watch命令（因为配置文件修改后需要Tailwind重新加载配置）
2. 检查生成的output.css，现在应该能看到.font-display、.font-body、.font-monospace这些类了
3. 然后你就可以正常使用<p class="font-monospace">This is your section content.</p>这样的写法，不需要手动写<style>标签

另外，你的input.css里的@font-face配置是没问题的，路径正确且字体文件能正常加载，修正配置后Tailwind会自动把font-monospace类和Monospace2字体绑定起来。

备注：内容来源于stack exchange，提问作者Fath-Likki