Can you change the base font-family in Tailwind config?

I’ve added new font families in my tailwind.config.js file. These are available with the .font-sans class, but I would like to change the global font-family as well. The 'tailwindcss/base' import adds a generic sans-serif family on the html, body {} selector.

Is there a way to change this global font family in the config file, rather than just adding in a new style to undo it?

I’d like to keep the overall CSS to a minimum and not have to add extra CSS to undo styles I don’t need. I couldn’t see any option in the docs that would apply to this.

Solution

For me it worked to override 'sans', because that's whats being used by default.

module.exports = {
  theme: {
    fontFamily: {
      sans: ['"PT Sans"', 'sans-serif']
    }
  },
}

(Note that theme.fontFamily is overriding the 3 defaults, so if you copy paste the above code you lose font-serif and font-mono)

But it would be weird to override 'sans' with something like a serif stack, so in those cases you can define the stack and apply it to the html/body tag:

<body class="font-serif"> <!-- Or whatever your named your font stack -->

More about tailwind font families