Tailwind css font-family 类未按应有的方式呈现答案

【问题标题】：Tailwind css font-family classes are not rendering as they shouldTailwind css font-family 类未按应有的方式呈现
【发布时间】：2022-01-17 03:34:07
【问题描述】：

上下文

我想在我的一个 vuejs 2 项目中使用 tailwind css 3.0。我正确设置了 tailwind css 以使其在我的项目中工作。

我想做什么

我想从 tailwind css 做的第一件事是字体管理。我尝试做的第一件事是使用字体系列修饰符font-sans，正如here 所解释的那样。所以在给定的 div 中，我添加了类：font-sans 和 font-semibold，它们只是一个字体大小修饰符。

我的预期

因此，如果我返回 tailwind css 网站，他们会向我们展示将 font-sans 类添加到文本 here 的结果，看起来像这样（准确地说，应用于此文本的所有类都是：@ 987654331@) :

所以我在我的项目上做了同样的事情，我得到了这个：

问题

我们可以很容易地看到这两个句子没有相同的样式（字体系列是问题）。而且我不明白为什么它们没有相同的渲染，因为它们具有完全相同的类。

感谢您在此问题上花费的任何时间，如果您需要更精确的问题，请询问我

【问题讨论】：

您使用的是什么字体系列？ Tailwind 网站的第一个字体是 Inter var，你有什么字体？
我没有使用任何特定的字体系列。我认为使用生成的类 font-sans 会给我与 tailwind css 网站上相同的渲染

标签： css tailwind-css

【解决方案1】：

Tailwind 网站为其网站使用自定义字体（特别是 Inter var）：

font-family: Inter var,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji

如果你想自定义它，你可以在tailwind.config：

module.exports = {
  theme: {
    fontFamily: {
      'sans': ['ui-sans-serif', 'system-ui', ...],
      'serif': ['ui-serif', 'Georgia', ...],
      'mono': ['ui-monospace', 'SFMono-Regular', ...],
      'display': ['Oswald', ...],
      'body': ['"Open Sans"', ...],
    }
  }
}

【讨论】：