无法使用 Nuxt/Tailwind 安装字体

Question

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

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 时，我收到此错误：

The intro-black class does not exist

有什么建议吗？

（我什至没有在 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',
    },
  ],
]

无法使用 Nuxt/Tailwind 安装字体

Can't install fonts with Nuxt/Tailwind

nuxt.js

tailwind-css