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）。该软件包将为您参考和导入Web字体，因此不再需要创建其他CSS。

安装字体

npm i typeface-inter

导入

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

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