How do I customize the default font sizes in Tailwind?
Asked on Oct 19, 2025
Answer
To customize the default font sizes in Tailwind CSS, you need to extend the theme configuration in your `tailwind.config.js` file. This allows you to define custom font sizes that can be used throughout your project.
<!-- BEGIN COPY / PASTE -->
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontSize: {
'xs': '0.75rem',
'sm': '0.875rem',
'base': '1rem',
'lg': '1.125rem',
'xl': '1.25rem',
'2xl': '1.5rem',
'3xl': '1.875rem',
'4xl': '2.25rem',
'5xl': '3rem',
'6xl': '4rem',
}
}
}
}
<!-- END COPY / PASTE -->Additional Comment:
- To apply these custom font sizes, use the class names like "text-xs", "text-lg", etc., in your HTML.
- Ensure you have the Tailwind CLI or PostCSS configured to process your `tailwind.config.js` changes.
- Extending the theme allows you to add new sizes without removing the default ones.
- You can also completely override the default font sizes by defining them directly under `fontSize` instead of using `extend`.
Recommended Links: