How to Customize the Font Size in Tailwind CSS ?
Customizing font size in Tailwind CSS involves using the text-[size]
utility class, where [size]
can be predefined size identifiers like xs
, sm
, md
, lg
, xl
, or numerical values. Additionally, you can extend the default font sizes in the configuration file for more customization.
Syntax
<p class="text-lg">
This text has a large font size.
</p>
Note: The font-size
utility class in Tailwind CSS accepts numeric values ranging from 0
to 96
, representing font sizes in pixels (px).
The below table illustrates the font size classes alongside their corresponding descriptions.
Classes | Description |
---|---|
text-xs |
Extra small text. |
text-sm |
Small text. |
text-base |
Base text size (default). |
text-lg |
Large text. |
text-xl |
Extra-large text. |
text-2xl |
Even larger text. |
Configuration (Optional)
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontSize: {
'2xl': '1.75rem',
'3xl': '2rem',
},
},
},
// Other Tailwind configurations...
};
Key Features
- Predefined Sizes: Tailwind provides predefined font sizes (
xs
,sm
,md
,lg
,xl
) for quick and consistent styling. - Numerical Control: Use numerical values for precise control over font size, allowing pixel-perfect adjustments.
- Configuration Flexibility: Extend or customize font sizes in the
tailwind.config.js
file for project-specific requirements. - Responsive Design: Apply responsive variants (
sm:
,md:
,lg:
,xl:
) to adapt font sizes based on different screen sizes.