自定义字体系列在 Tailwind 主题配置中不起作用

Question

我已经为我的项目自定义了默认主题。这是我的 tailwind.config.js 文件的主题部分：

module.exports = {
  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    screens: {
      tablet: "768px",
      // => @media (min-width: 768px) and (max-width: 1023px) { ... }

      desktop: "1024px",
      // => @media (min-width: 1024px) { ... }
    },
    fontFamily: {
      Inter: ["Inter"],
      '"Work Sans"': ['"Work Sans"'],
      '"Open Sans"': ['"Open Sans"'],
      Montserrat: ["Montserrat"],
    },
    backgroundColor: () => ({
      primary: "#0C1F4F",
      secondary: "#1fc69a",
    }),
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

问题是 fontFamily 包含 space 即 Work Sans 不工作，而 Inter 正在工作。我已经关注了 documentation.

Note that Tailwind does not automatically escape font names for you. If you’re using a font that contains an invalid identifier, wrap it in quotes or escape the invalid characters.

{
  // Won't work:
  'sans': ['Exo 2', ...],

  // Add quotes:
  'sans': ['"Exo 2"', ...],

  // ...or escape the space:
  'sans': ['Exo\ 2', ...],
}

但似乎不起作用。

<button className="w-40 h-12 bg-secondary rounded-lg font-semibold font-Work Sans text-xl">
  Get a quote
</button>

Answer 1

原因是我在单词之间使用 space，因此没有更改字体。因此，通过使用 camelCase 或 word-word 将得到修复。

代码如下：

fontFamily: {
  inter: "Inter",
  workSans: "Work Sans",
  openSans: "Open Sans",
  Montserrat: "Montserrat",
}

<button className="w-40 h-12 bg-secondary rounded-lg font-semibold font-workSans text-xl">
  Get a quote
</button>

自定义字体系列在 Tailwind 主题配置中不起作用

Custom Font Family not working in Tailwind theme configuration

html

css

tailwind-css