Issue
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
Answered By - Andreas
