Tailwind Font Size Guide

Typography is the backbone of visual hierarchy. Tailwind CSS makes adjusting type effortless through its text-{size} utilities. This guide dives deep into font sizes, from text-xs through text-9xl, and gives you an interactive preview so you can feel each size before you ship it.

Target queries: tailwind font size · text size · text-xs … text-9xl

Default font‑size scale (Tailwind v3.x)

One of its strengths is the ease with which you can customize various design aspects, including font sizes. This guide will walk you through the best practices and methods to customize font sizes in Tailwind CSS to create a cohesive design.

Live size‑preview widget

How it works

• Moving the range slider mutates index, which updates the bound paragraph’s class.

• The paragraph inherits all Tailwind typography utilities, so you can stack font weight, color, tracking, and more.

Understanding Tailwind CSS Font Size Utilities

Tailwind provides a set of predefined font size classes that you can use right out of the box.

These classes range from .text-xs for extra-small text to .text-9xl for extra-large text. Here are some examples:

<p class="text-xs">This is extra-small text.</p>
<p class="text-base">This is base text.</p>
<p class="text-2xl">This is 2xl text.</p>

Using Tailwind’s Default Font Size Utilities

Tailwind comes with a set of predefined font size utilities that follow a sensible scale. Common classes include:

<p class="text-sm">This is a small paragraph.</p>
<p class="text-base">This paragraph uses the base font size.</p>
<p class="text-lg">This text is larger for more emphasis.</p>
<p class="text-xl">Great for subheadings and stand-out text.</p>
<p class="text-2xl">Perfect for headings or section titles.</p>

These classes make it straightforward to adjust text size directly in your HTML. Simply choose the class that matches the desired size without worrying about writing custom CSS.

Customizing Font Sizes

To customize font sizes, you can extend the default font size scale in the tailwind.config.js file. This is particularly useful if you need specific sizes that are not included in the default scale.

Basic Customization

Add a custom font size scale in the theme section of your tailwind.config.js file:

module.exports = {
  theme: {
    extend: {
      fontSize: {
        'tiny': '0.625rem', // 10px
        'huge': '4rem', // 64px
      },
    },
  },
}

Now you can use these custom font sizes in your HTML:

<p class="text-tiny">This is tiny text.</p>
<p class="text-huge">This is huge text.</p>

Responsive Font Sizes

Tailwind’s responsive variants let you adjust font size based on screen size. For example, to make text larger on small screens and even bigger on medium screens and above, you can chain utility classes with responsive prefixes:

<p class="text-sm md:text-base lg:text-xl">This text scales up across breakpoints.</p>

In this example:

• On small screens, the font size is text-sm

• On medium screens (md), it increases to text-base

• On large screens (lg), it becomes text-xl

This approach ensures your typography remains accessible and visually appealing on all devices, improving the overall user experience.

Using Scalable Units

Using scalable units like rem and em instead of fixed units like px is a best practice for responsive design. Tailwind’s default font sizes are defined using rem, making them scalable. You can continue this practice in your custom configurations.

module.exports = {
  theme: {
    extend: {
      fontSize: {
        'small': '0.875rem', // 14px
        'medium': '1rem', // 16px
        'large': '1.25rem', // 20px
      },
    },
  },
}

Advanced Techniques

1. Combining Font Size with Other Utilities

You can combine font size classes with other utility classes to create complex styles easily:

<p class="text-lg font-bold text-gray-700">This is bold and gray large text.</p>

2. Creating a Custom Font Size Scale

If you need a specific set of font sizes for your project, you can create a completely custom scale:

module.exports = {
  theme: {
    fontSize: {
      'xs': '.75rem', // 12px
      'sm': '.875rem', // 14px
      'base': '1rem', // 16px
      'lg': '1.125rem', // 18px
      'xl': '1.25rem', // 20px
      '2xl': '1.5rem', // 24px
      '3xl': '1.875rem', // 30px
      '4xl': '2.25rem', // 36px
      '5xl': '3rem', // 48px
      '6xl': '4rem', // 64px
    },
  },
}

Customizing the scale

If the default scale doesn’t fit your design system, extend or replace it in tailwind.config.js:

// tailwind.config.js
export default {
  theme: {
    extend: {
      fontSize: {
        tiny: '0.625rem',     // 10 px
        mega: '10rem',        // 160 px
      },
    },
  },
}

You can reference custom sizes with text-tiny and text-mega just like the core utilities.

Best Practices for Font Sizing

• Maintain a clear hierarchy: Use larger sizes for headings and important content, medium sizes for body text, and smaller sizes for captions and notes.

• Leverage responsive utilities: Ensure your text scales appropriately across different devices. Tailwind’s responsive classes help maintain readability on any screen size.

• Test for accessibility: Larger font sizes can improve readability, especially for users with visual impairments. Combine proper sizing with adequate color contrast.

• Stick to a system: Rather than assigning random sizes, consider following a typographic scale or design system. Tailwind’s defaults are a great starting point.

Real-World Example

A blog post might need varying font sizes for different sections.

Using Tailwind, you can easily apply these:

<h1 class="text-4xl">Main Heading</h1>
<h2 class="text-2xl">Subheading</h2>
<p class="text-base">This is the body text of the blog post.</p>

Conclusion

Adjusting font size in Tailwind CSS is simple and flexible. With built-in utility classes, responsive variants, and the ability to customize sizes in tailwind.config.js, you have full control over typography. By applying best practices and testing for readability, you’ll ensure a consistent and accessible experience for every user.

FAQ

What unit does Tailwind use for font size?

Tailwind compiles sizes to rem by default, which respects the root font-size (usually 16 px). This keeps text scalable for accessibility.

How do I set responsive font sizes?

Prefix any size with a breakpoint: md:text-xl lg:text-3xl. Mobile first!

Can I use fluid or clamp‑based sizing?

Absolutely—define a custom fontSize value such as clamp(1rem, 1vw + 1rem, 2rem).

What unit does Tailwind use for font size?

Tailwind compiles sizes to rem by default, which respects the root font-size (usually 16 px). This keeps text scalable for accessibility.

How do I set responsive font sizes?

Prefix any size with a breakpoint: md:text-xl lg:text-3xl. Mobile first!

Can I use fluid or clamp‑based sizing?

Absolutely—define a custom fontSize value such as clamp(1rem, 1vw + 1rem, 2rem).