Looking to customize the default font Proxima Nova from TailwindCSS in my Nuxt3 project but navigating the file structure is a bit tricky for me. I've gone ahead and installed the tailwindcss module:
npm i -D @nuxtjs/tailwindcss
and added the module to nuxt.config.ts:
modules: [
'@nuxtjs/tailwindcss'
],
but how can I adjust the font-family? In the nuxt folder, there's a tailwind.config.cjs that seems to refresh whenever the dev server triggers a style update. Despite attempting changes, it reverts back.
Even when I create a tailwind.config.js file in the root directory, it doesn't seem to be recognized by the project. Here's a snippet of what I've tried:
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
},
},
};
However, the browser continues to display these default fonts:
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";