Tailwind 不在生产版本中应用自定义字体系列

Question

我现在正在使用带有 Tailwind 的 Vue。

这是我当前的 Tailwind 配置：

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

module.exports = {
  purge: [],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  variants: {},
  plugins: [],
}

我正在使用Inter var 字体，因为在 OSX 系统上，默认字体粗细不起作用。现在，我想构建这个项目，但在生产版本中它没有应用正确的字体系列。我尝试通过 html 链接和 css 导入来导入字体系列，但这些都不起作用。

Answer 1

如果您使用的是 Vue-CLI，我建议您通过 NPM 添加 the typeface 以实现可维护性，并将其导入您的入口文件（例如 main.js）。这个包将负责为您引用和导入 webfont(s)，因此不再需要创建额外的 CSS。

安装字体

npm i typeface-inter

导入

import Vue from 'vue';
import 'typeface-inter';
// ...

当然，您仍然需要extend the font-family（或者只需将其添加到列表中也可以）。