When you install Tailwind CSS following the official guide, the default font-family that applies to the HTML element of your project corresponds to the font-sans utility class, as below (Preflight);
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";
In order to modify the Tailwind Preflight configuration, you can make use of @layer to extend the base as below;
/*
* Override default font-family above
* with CSS properties for the .font-serif utility.
*/
@tailwind base;
@layer base {
html {
@apply font-serif;
}
}
@tailwind components;
@tailwind utilities;
Though global (as it applies to the root HTML element of the document), the approach described above overrides the font-family defined in Tailwind Preflight configuration but ensure it remains in your compiled CSS, when used.
Assuming you want to use "Segoe UI" with Roboto and sans-serif only as sans font-family applied to your HTML element in the same order, without override, make use of the snippet below;
// tailwind.config.js
const { fontFamily } = require('tailwindcss/defaultTheme')
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
fontFamily: {
sans: [
'"Segoe UI"',
'Roboto',
'sans-serif',
],
},
},
plugins: [],
}
In case you want your new newly defined sans font-family to be applied (still without override) but with Tailwind's as default fallback, modify your script as below;
// tailwind.config.js
const { fontFamily } = require('tailwindcss/defaultTheme')
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
fontFamily: {
sans: [
'"Segoe UI"',
'Roboto',
'sans-serif',
...fontFamily.sans,
],
},
},
plugins: [],
}
Please note: in the last scenario above, the font-family applied to the HTML element of your project could contain duplicate font listings, if already exiting in the CSS properties of Tailwind's .font-sans utility class (that is the case for the three fonts used in the example above).
Let's say you want to use IBM Plex Sans Variable as your custom sans font, with the regular Tailwind CSS .font-family sans, without override, make use of the snippet below, then import the font into your project;
// tailwind.config.js
const { fontFamily } = require('tailwindcss/defaultTheme')
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
fontFamily: {
sans: [
'"IBM Plex Sans"',
...fontFamily.sans,
],
},
},
plugins: [],
}
Remember: use the same font-family name as in your tailwind.config.js file as name for your custom font - here: "IBM Plex Sans".
