如何在 Tailwind 中使用给定（内置）系列中的特定字体？

Question

我想使用 Tailwind 将字体“Courier New”应用到我的文本中。

在文档中，我看到它在 font-mono https://tailwindcss.com/docs/font-family

下可用

但是当我应用 font-mono 时，它应用了所有这些系列，我如何应用“Courier New”特别是？

Answer 1

您可以覆盖 Tailwind configuration file 中的 font-mono 字体系列：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'mono': ['"Courier New"', 'monospace'],
      },
    },
  },
};

当 Courier New 不可用时，您应该保留 monospace 字体作为后备。

此外，您可以在 theme.extend.fontFamily 对象中添加新的字体系列（theme.extend.fontFamily.foobar 转换为 font-foobar CSS class），因此它可能更明智的做法是完全为您的 Courier New 特定用例创建一个新系列，而不是覆盖默认值。

如何在 Tailwind 中使用给定（内置）系列中的特定字体？

How to use a particular font from a given (built in) family with Tailwind?

next.js

tailwind-css