Open In App

How to Customize the Font Size in Tailwind CSS ?

Last Updated : 07 Feb, 2024
Like Article

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.


<p class="text-lg">
This text has a large font size.

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.

Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads