tailwind.config.js无法访问tailwind.css中指定的字体(nuxt.js 3，nuxt.js 3)

Question

tailwind.config.js文件无法访问tailwind.css文件中指定的字体。我使用的是nuxt.js 3和tailwindcss，非常感谢您的帮助。

tailwind.css

/* /assets/css/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    background-color: #16181c;
    color: #ecf9fb;
    font-family: "Inter", Arial, sans-serif;
    margin: 1rem 5%;
  }
}

/* Inter Regular 400 */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-regular-400.woff2");
}

/* Solway Bold 700 */
@font-face {
  font-family: "Solway";
  font-weight: 700;
  src: url("../fonts/solway-bold-700.woff2");
}

Solway字体的应用是正确的，所以导入它没有问题；将@font-face放在@layer base中不会做任何事情

tailwind.config.js

/* tailwind.config.js */
module.exports = {
  content: [
    "components/**/*.vue",
    "layouts/**/*.vue",
    "pages/**/*.vue",
    "composables/**/*.{js,ts}",
    "plugins/**/*.{js,ts}",
  ],
  theme: {
    extend: {
      fontFamily: {
        solway: ['"Solway" "Inter" Arial sans-serif'],
      },
      backgroundColor: {
        card: ["#26292f"],
      },
    },
  },
  plugins: [],
};

我是如何尝试使用新字体系列的

// /layouts/default.vue
<template>
  <header class="bg-card-0 rounded-2xl p-4 text-2xl">
    <NuxtLink to="/" class="font-solway font-bold">Second Hand</NuxtLink>
  </header>
  <slot />
</template>

Answer 1

我的字体导入方式与您在第一个代码段中(在基本层之外)所做的相同。我认为@layer base是用于要添加到默认重置样式中的样式，而不是字体。

此原木火箭文章导入字体的方式与前面提到的相同。

​

Answer 2

错误发生在tailwind.config.js文件中。它是什么：

fontFamily: {
  solway: ['"Solway" "Inter" Arial sans-serif'],
},

什么是正确的：

fontFamily: {
  solway: ["Solway", "Inter", "Arial", "sans-serif"],
},