从插件中删除 Tailwind 自定义字体答案

【问题标题】：Tailwind custom Font being removed from Plugin从插件中删除 Tailwind 自定义字体
【发布时间】：2021-05-30 12:33:46
【问题描述】：

我已成功将两种自定义字体加载到我使用 tailwind 的代码库中。我的问题是，当我使用插件为我的 HTML 创建一组基本样式时，自定义字体被忽略，然后恢复为备份。

只有当我在插件中使用主题目录回调时才会发生这种情况。如果我在那里对 fontFamily 名称进行硬编码，那么它可以正常工作。

tailwind.config.js

/**
 * Configuration
 */
module.exports = {
  theme: {
    fontFamily: {
      display: ['New Grotesk', 'arial'],
      body: ['Founders Grotesk', 'arial']
    }
  },
  plugins: [
    globalStyles,
  ],
}

插件

const globalStyles = ({ addBase, config }) => {
  addBase({
    'h1, h2, h3, h4, h5': {
      marginBottom: config('theme.margin.2'),
      lineHeight: config('theme.lineHeight.tight'),
      fontFamily: config('theme.fontFamily.display')
    },
  });
}

如果我将fontFamily: config('theme.fontFamily.display') 换成fontFamily: 'New Grotesk'。它可以正常工作，但这违背了使用配置功能的目的。

我知道这可能会扩展 @base scss，但我更愿意这样做。

这是我的浏览器忽略 fontFamily 的屏幕截图

【问题讨论】：

标签： css fonts tailwind-css

【解决方案1】：

您的问题是在使用名称中有空格的字体时需要在 font-family 堆栈中添加双引号：

// Won't work
fontFamily: {
  display: ['New Grotesk', 'arial'],
}

// Add quotes ??:
fontFamily: {
  display: ['"New Grotesk"', 'arial'],
}

参考：https://tailwindcss.com/docs/font-family#font-families

【讨论】：