无法使用Nuxt/Tailwind安装字体

Question

我准确地应用了这个答案，但是我的自定义字体类仍然不能工作：

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‘see中加载的字体:不管Tailwind，我认为字体至少应该加载，但它没有)

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

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

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

在main.scss中

@import 'fonts';

为了安装Nuxt/Tailwind，我遵循了医生们。但是，有时Nuxt.js的情况是这样的，事情并没有如预期的那样发生，而且Nuxt也没有在/assets文件夹中创建任何tailwind.css文件。

Answer 1

我不确定配置的其余部分，但是要应用带有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',
    },
  ],
]

Answer 2

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

应：

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

Answer 3

不应使用(“.”)在字体名称中

​

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

​