How to configure TailwindCSS in Nuxt3?

Question

I'm trying to set the default font Proxima Nova from TailwindCSS in my Nuxt3 project but am unfamiliar with the file structure. I've installed the tailwindcss module :

npm i -D @nuxtjs/tailwindcss

and added the module to nuxt.config.ts :

modules: [
    '@nuxtjs/tailwindcss'
],

but how do I change the font-family ? There is a nuxt folder with tailwind.config.cjs inside but it seems to be updated whenever the dev server triggers a style update. I've tried changing it but it changes back.

When I create a tailwind.config.js file in the root folder, it doesn't seem to be used by the project. I've tried:

/** @type {import('tailwindcss').Config} */
module.exports = {
    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
    },
};

Instead the browser shows that these fonts are applied by default:

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";I

Answer 1

When I create a tailwind.config.js file in the root folder, it doesn't seem to be used by the project.

Have you specified configPath in nuxt configuration file?

This works for me:

export default defineNuxtConfig({
    modules: ["@nuxtjs/tailwindcss"],
    tailwindcss: {
        configPath: "~/tailwind.config.ts",
    },
})