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.