使用Tailwind CSS自定义字体后无法修改字体粗细的问题

问题原因分析 #

• fontWeight配置值无效：你定义的'black': '95'不是合法的字体粗细值，CSS规范中字体粗细的数值应为100-900的整百数（如100、200…900），或是normal、bold这类标准关键字。
• 覆盖默认字重集合：当前fontWeight配置会完全替换Tailwind的默认字重配置，导致原本的font-bold、font-semibold等通用粗细类失效。
• 字体文件字重缺失：如果你的环境中没有对应字重的Helvetica Neue字体文件，即使配置正确也无法显示预期的粗细效果。

修复步骤 #

1. 修正fontWeight配置逻辑 #

使用extend来扩展自定义字重，而非直接覆盖默认配置，这样既能保留Tailwind原生的粗细类，又能添加自定义项：

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

module.exports = {
  content: ["./index.html", "./src/*.{jsx,js}", "./src/**/*.{jsx,js}"],
  theme: {
    colors: {
      'main-blue':'#0066B2',
      'secondary-blue':'#4B8EC2',
      'background':'#4B8EC2',
      'white': colors.white
    },
    fontFamily: {
      'sans': ['"Helvetica Neue"', 'Arial', 'sans-serif']
    },
    extend: {
      fontWeight: {
        'black': 900, // 使用合法的整百数值，需匹配Helvetica Neue支持的字重
      }
    }
  },
  plugins: [],
}

2. 确认字体字重支持 #

• 如果是项目引入字体文件，检查是否包含对应粗细的Helvetica Neue版本（如Helvetica Neue Black对应900字重）。
• 如果依赖系统字体，确认用户设备中安装了包含所需字重的Helvetica Neue，否则会自动回退到Arial等后备字体。

3. 验证使用方式 #

确保在代码中正确调用粗细类：

<p class="font-sans font-black">黑色粗体文本</p>
<p class="font-sans font-bold">普通粗体文本</p>

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