0

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
Artur Müller Romanov
  • 4,417
  • 10
  • 73
  • 132
  • What is your `@font-face` CSS part? For example, as [shown here](https://stackoverflow.com/a/66712645/8816585). – kissu Nov 20 '22 at 22:05
  • @kissu I have not set any `font-face` in css. Is this not configurable in the config file? – Artur Müller Romanov Nov 20 '22 at 22:41
  • 1
    Your tailwind config and the CSS file are 2 different things. I'm not sure how you load your fonts but I always did [like that](https://stackoverflow.com/a/68166329/8816585), it seems normal to me and works fine. – kissu Nov 20 '22 at 22:43

1 Answers1

0

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",
    },
})
Anoromi
  • 106
  • 2
  • This gives an error "Object literal may only specify known properties, and 'tailwindcss' does not exist in type 'NuxtConfig'" So It's not even possible to config tailwind on Nuxt 3 using Typescript – Vixson Mar 01 '23 at 11:45
  • 1
    @Vixson, You will get an error if you haven't built the project. Nuxt adds those properties to the config only after you run the project with npm run dev. – Anoromi Apr 25 '23 at 18:27
  • Oh... I see. So it's not actually an error it's just that the Nuxt builds the various modules configs after the first run... lol... I found that out the hard way. Thanks, @Anoromi – Vixson May 31 '23 at 02:18