如何在tailwind.config中全局添加字体特性？

你之前的写法错误在于把字体配置对象追加到了整个sans字体数组的末尾，正确的做法是将配置对象与InterVariable字体绑定为一个数组项。

修改后的完整tailwind.config.js配置如下：

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: [
          // 将字体名称和配置对象绑定为一个数组项
          ['InterVariable', {
            fontFeatureSettings: '"cv11", "ss01"',
            fontVariationSettings: '"opsz" 32'
          }],
          // 保留默认的sans字体 fallback
          ...defaultTheme.fontFamily.sans
        ],
      },
    },
  },
  plugins: [],
}

关键说明： #

• Tailwind的fontFamily配置中，每个字体条目可以是字符串或**[字体名称, 配置对象]**的数组形式，配置会直接应用到对应的字体上。
• 此修改后，所有默认使用sans字体的元素（Tailwind默认全局文本字体为sans）都会自动继承这些字体特性。
• 需确保你使用的InterVariable字体确实支持cv11、ss01字符变体以及opsz可变字体轴，否则配置不会生效。

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