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 и css, но ни один из них не работал.

Answer 1

Если вы используете Vue -CLI, я бы рекомендовал добавить гарнитуру через NPM для удобства обслуживания и импортировать его в свой файл ввода (например, main.js). Этот пакет позаботится о ссылках и импорте веб-шрифтов за вас, поэтому больше не нужно создавать дополнительные CSS.

Установка шрифта

npm i typeface-inter

Импорт

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

И, конечно же, вам все равно нужно расширить семейство шрифтов (или просто добавить его в список тоже подойдет).