Can't install fonts with Nuxt/Tailwind

Question

I applied this answer exactly but my custom font class still doesn't work:

tailwind.config.js:

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

In 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');
}

This should work, but when I try @apply intro-regular anywhere in my app I get this error:

The intro-black class does not exist

Any suggestion?

(also I don't even see the font being loaded in DevTools' network tab: regardless of Tailwind I would think that the font should at least load but it doesn't)

EDIT: more info on my setup

Import of my main.scss in nuxt.config.js:

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

And in main.scss:

@import 'fonts';

To install Nuxt/Tailwind I followed the docs to the letter. But is sometimes the case with Nuxt.js, things didn't turn out as they were supposed to and Nuxt did not create any tailwind.css file in the /assets folder.

Answer 1

I'm not sure about the rest of the configuration, but to apply a specific font with Tailwind, the correct form is @apply font-intro-regular (prefixed with font).

---

As for the remaining part of the configuration, I do have this in ~/assets/scss/tailwind.scss

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

You could probably add a @import './fonts'; here if it still do not work.

And this in my nuxt.config.js file

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