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

Question

我现在正在使用 Vue 和 Tailwind。

这是我当前的 Tailwind 配置：

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

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

我正在使用 Inter var 字体，因为在 OSX 系统上默认字体粗细不起作用。现在，我想构建这个项目，但在生产版本中它没有应用正确的字体系列。我尝试通过 html link 和 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（或者只需将其添加到列表中也可以）。