如何在tailwind.config中添加字体功能？

Question

这是我当前的 tailwind.conf.js

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['InterVariable', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [],
}

我想为 sans 添加字体功能：

{
  fontFeatureSettings: '"cv11", "ss01"',
  fontVariationSettings: '"opsz" 32'
}

我尝试过这样添加，但没有成功：

module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['InterVariable', ...defaultTheme.fontFamily.sans, 
          {
            fontFeatureSettings: '"cv11", "ss01"',
            fontVariationSettings: '"opsz" 32'
          },
        ],
      },
    },
  },
  plugins: [],
}

如何全局添加字体功能？

Answer 1

如果您想为这些字体功能创建自定义实用程序：

像这样更新你的 tailwind.config.js :

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['InterVariable', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [
    function({ addUtilities }) {
      addUtilities({
        '.font-feature-sans': {
          fontFeatureSettings: '"cv11", "ss01"',
          fontVariationSettings: '"opsz" 32',
        },
      });
    },
  ],
};

在 HTML 中使用自定义实用程序类：

<p class="font-feature-sans font-sans">
  This text has font features and variations applied globally.
</p>