无法使用 Nuxt/Tailwind 安装字体

Question

我完全应用了this answer，但我的自定义字体类仍然不起作用：

tailwind.config.js:

module.exports = {
  theme: {
    fontFamily: {
      "intro-regular": "intro-regular"
    },
    extend: {
      fontSize: {
        "10": "10px",
        "11": "11px"
      }
    }
  }
}

在assets/scss/fonts.scss:

@font-face {
  font-family: 'intro-regular';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/intro/Intro-Regular.otf') format('opentype');
}

这应该可以，但是当我在我的应用程序的任何地方尝试@apply intro-regular 时，我会收到此错误：

intro-black 类不存在

有什么建议吗？

（我什至看不到在 DevTools 的网络选项卡中加载的字体：不管 Tailwind 我认为字体至少应该加载但它没有）

编辑：关于我的设置的更多信息

在nuxt.config.js中导入我的main.scss：

css: [
  {
    src: '~/assets/scss/main.scss',
    lang: 'scss'
  }
],

在main.scss:

@import 'fonts';

为了安装 Nuxt/Tailwind，我遵循the docs 的要求。但有时Nuxt.js 的情况并非如此，而且Nuxt 没有在/assets 文件夹中创建任何tailwind.css 文件。

Answer 1

src: url('../fonts/intro/Intro-Regular.otf')

应该是：

src: url('~/assets/fonts/intro/Intro-Regular.otf')

Answer 2

我不确定其余的配置，但要使用 Tailwind 应用特定字体，正确的形式是 @apply font-intro-regular（以 font 为前缀）。

---

至于剩下的部分配置，我在~/assets/scss/tailwind.scss里确实有这个

/* stylelint-disable scss/at-rule-no-unknown */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* stylelint-enable */

如果它仍然不起作用，您可能可以在此处添加 @import './fonts';。

这在我的nuxt.config.js 文件中

buildModules: [
  [
    '@nuxtjs/tailwindcss',
    {
      cssPath: '~/assets/scss/tailwind.scss',
    },
  ],
]