Having trouble configuring Tailwind to use a custom font without it overriding the tailwind.css file and not displaying the changes?
https://i.stack.imgur.com/ExDCL.png
Check out my files below.
// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
purge: [
'./components/**/*.{vue,js}',
'./layouts/**/*.vue',
'./pages/**/*.vue',
'./plugins/**/*.{js,ts}',
'./nuxt.config.{js,ts}',
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
fontFamily: {
sans: ['Rubik', ...defaultTheme.fontFamily.sans],
},
},
},
variants: {
extend: {},
},
plugins: [],
}
// nuxt.config.js
module.exports = {
...,
css: ["~assets/css/tailwind.css"],
...,
}
/*@/assets/css/tailwind.css*/
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
@font-face {
font-family: 'Rubik';
src: url(../fonts/Rubik-Light.ttf);
font-weight: 300;
}
@font-face {
font-family: 'Rubik';
src: url(../fonts/Rubik-Medium.ttf);
font-weight: 500;
}
@font-face {
font-family: 'Rubik';
src: url(../fonts/Rubik-Regular.ttf);
font-weight: 400;
}
}
The custom fonts are properly linked in the tailwind.css file.