tailwind.config.js has no access to fonts specified in tailwind.css (nuxt.js 3, tailwindcss)

user40ak1 0
Viewed 34

The tailwind.config.js file somehow has no access to fonts specified in the tailwind.css file. I am using nuxt.js 3 and tailwindcss, any help is greatly appreciated

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");
}

The Solway Font gets applied correctly, so no Problems with importing it; Putting the @font-face inside @layer base doesn't do anything

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: [],
};

How I tried to use the new font family

// /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>
font-face fonts nuxtjs3 tailwind-css nuxt.js
2 Answers

I'm importing my fonts the same way you do in the first snippet (outside the base layers). I think the @layer base is for styles you want to add to the default reset styles not font.

This Log Rocket article imports the fonts the same way I mentioned. enter image description here

Muhammad Mahmoud0

The Error was laying in the tailwind.config.js file. What it was:

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

What is correct:

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