Custom Theme Isn't Applied

[matthewtridoan]

Hi all,

I recently created a CodeSandbox to mess around with NextJS and TailwindCSS, and I can't seem to edit the theme.

https://codesandbox.io/s/laughing-booth-mirvj?file=/tailwind.config.js

I've generated a tailwind.config.js file, but when I tried to change the font of the Home link in the navbar to a serif font, it doesn't seem to work.

Any help would be appreciated.

[simonswiss]

Hey!

You're currently defining the fontFamily object outside of the theme key in your config file:

theme: {
  extend: {}
},
colors: {},
fontFamily: {
  sans: ["ui-serif"],
  title: ["serif"]
},

You need to move this inside the theme (to override it completely) or inside of theme.extend to extend it:

theme: {
  extend: {
    fontFamily: {
      sans: ["ui-serif"],
      title: ["serif"]
    },
    colors: {},
  }
},

Hope it helps! 👍

[matthewtridoan]

Thank you so much! My problem is fixed.

[simonswiss]

Glad I could help! 🎉