March 30, 2021
Tailwind CSS comes with default .font-sans
, .font-serif
, and .font-mono
classes. But sometimes, you want to add your own font family, or customize one of the existing classes.
You can do this with your tailwind.config.js
file using the extend functionality.
// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
variants: {
extend: {
fontFamily: {
sans: ['"DM Sans"', ...defaultTheme.fontFamily.sans],
cursive: ['cursive']
}
}
}
}
The sans
line overwrites Tailwind's .font-sans
class with your own font at the front, but then falls back to the Tailwind stack if your custom font doesn't load. The cursive
line creates a new class called .font-cursive
that has that font stack.
Now, next time you rebuild your Tailwind CSS file, those changes will be made to the font classes.
Notice that font names that contain a space must have additional quotes around them.
Tufts Meal Plan Wrapped
Mar 2, 2024
Building an e-ink picture frame that displays an iCloud photo album
Jan 9, 2024
2023 in review
Jan 5, 2024
Subscribe to my newsletter for a monthly round-up of new blog posts and projects Iām working on!