Tailwind Font size

The Tailwind font size utility class allows you to easily adjust the size of text elements. It provides a set of classes that enable you to specify font sizes using predefined sizes or custom values, giving you control over the typography in your web applications.

Predefined Tailwind Font Sizes

Tailwind CSS provides a range of predefined font sizes that you can apply to text elements. These tailwind font sizes are denoted by a numeric scale, ranging from 1 to 9, where 1 represents the smallest font size and 9 represents the largest font size.

To apply a predefined font size, you can use the text-{size} class, where {size} is the desired font size scale. Here's an example:

<div>
  <p class="text-sm... ">The font-size is semibold</p>
  <p class="text-xl...">The font-size is extra large</p>
  <p class="text-4xl...">The font-size is 4 extra large</p>
  <p class="text-6xl...">The font-size is 6 extra large</p>
  <p class="text-8xl...">The font-size is 8 extra large</p>
</div>

Preview

Responsive Tailwind Font Sizes

Tailwind CSS provides responsive utility classes for font sizes, allowing you to adjust the tailwind font size at different breakpoints. To use responsive tailwind font size classes, you can append the breakpoint prefix to the font size classes. For example, md:text-2xl sets the font size to extra large starting from the medium breakpoint and above.

<p class="text-base md:text-2xl">
  This is a paragraph with a responsive font size.
</p>

Preview

In the above example, the text-base class is applied by default, setting the tailwind font size based on the base font size. However, starting from the medium breakpoint and above, the md:text-2xl class is applied, changing the tailwind font size to extra large.

Relative Tailwind Font Sizes

Tailwind CSS also provides utility classes for applying relative font sizes. You can use the text-sm, text-lg, and other similar classes to adjust the font size relative to the parent element's font size. Here's an example:

<p class="text-lg font-bold text-emerald-300">
  This is a paragraph with a font size larger than the default.
</p>

Preview

In the above example, the text-lg class is applied to the <p> element, setting the tailwind font size to be larger than the default font size.

Line-Height & Vertical Rhythm

Every text-* class in Tailwind has a default line-height that matches the font size. But when scaling type responsively or designing components with custom layouts, you’ll often need to tweak line-height for clarity and visual flow.

Tip: Use leading- utilities for better control.*

<div class="text-center rounded-t-xl overflow-hidden bg-emerald-50 p-10">
<p class="text-sm leading-snug text-emerald-600">
  Tighter lines for compact layouts or labels.
</p>
<p class="text-lg leading-loose text-emerald-600">
  Looser lines for open, airy design.
</p>
<p class="text-base leading-relaxed md:text-lg md:leading-loose text-emerald-600">
  Adjusting line height improves legibility, especially for larger font sizes.
</p>
</div>

Preview

Using Arbitrary Font Sizes

Tailwind allows developers to use arbitrary values when predefined text-* utilities aren't enough. This gives you full control over edge cases without bloating your config.

<p class="text-[17px] leading-[26px]">
  This text uses an exact 17px font size and 26px line height.
</p>

Preview

Tip: Always document or abstract arbitrary values in components to avoid inconsistency.

Hover and Focus Font Size Use

Tailwind doesn’t allow changing font size on hover: or focus: by default for good reason—shifting text can disrupt layout. But in specific UI cases (e.g., large nav or hero buttons), it's sometimes useful.

<div class="p-6 bg-white rounded-lg shadow-lg">
  <h3 class="text-xl font-medium">Card Title</h3>
  <p class="text-sm text-gray-600 mt-2">Supporting information in smaller font.</p>
  <a href="#" class="text-base hover:text-lg transition-all duration-200 text-emerald-400 hover:text-emerald-800">
  Learn More
</a>
</div>

Preview

Custom Scales via Configuration

Tailwind allows you to fully customize font sizes via the theme.extend section of tailwind.config.js. Instead of using the predefined scales, you can specify your own font size value.

Why Customize?

• Match branding guidelines

• Create a consistent design language

• Introduce niche use cases like super-small disclaimers or massive titles

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontSize: {
        tiny: ['0.625rem', { lineHeight: '0.875rem' }], // 10px
        massive: ['5rem', { lineHeight: '1' }],         // 80px
      },
    },
  },
}

<h1 class="text-massive font-bold text-center">Legal disclaimer</h1>
<p class="text-tiny">This legal  document is binding and allows you to use our stoftware and we are not liable to any way you choose to use this technonlogy.</p>

Preview

In the above example, the text-tiny class is applied to the <p> element, setting the font size to 10 pixels while the text-massive which is 80pixel is applied to the <h1>.

Real-World Examples & Component Patterns

Below are complete UI snippets with explanations on how Tailwind font sizes are used to establish clear hierarchies, improve scannability, and maintain responsive design across components.

Pricing Table

Font sizing is used to differentiate primary pricing info (text-5xl), plan name (text-2xl), and supporting list items (text-sm). The button uses text-base for balance.

<div class="max-w-md p-4 border rounded-xl text-center">
  <h2 class="text-2xl font-semibold">Pro Plan</h2>
  <p class="text-5xl font-bold mt-2">$49<span class="text-base font-normal">/mo</span></p>
  <ul class="text-sm text-gray-600 mt-4 space-y-2">
    <li>Unlimited Projects</li>
    <li>Priority Support</li>
    <li>Advanced Analytics</li>
  </ul>
  <button class="mt-6 px-4 py-2 text-base bg-indigo-600 text-white rounded-md">
    Get Started
  </button>
</div>

Preview

Blog Post Card

The post title uses text-xl for prominence, the excerpt uses text-sm for body text, and the link uses text-sm with emphasis through font weight.

<div class="flex justify-center items-center">
<article class="max-w-sm p-6 rounded-lg shadow-md bg-white">
  <h3 class="text-xl font-semibold mb-2">Understanding Tailwind Font Utilities</h3>
  <p class="text-sm text-gray-600 leading-snug">
    Learn how to work with font sizing in Tailwind CSS and create a scalable type system that adapts to any layout.
  </p>
  <a href="#" class="inline-block mt-4 text-sm font-medium text-indigo-600 hover:underline">
    Read More →
  </a>
</article>
</div>

Preview

Section Header with Description

text-4xl creates a strong visual anchor for the section title. text-lg is used for the paragraph to maintain legibility at a slightly smaller scale.

<div class="flex justify-center items-center">
<div class="text-center mb-10">
  <h2 class="text-4xl font-bold">Why Choose Us</h2>
  <p class="text-lg text-gray-600 mt-2 max-w-xl mx-auto">
    Discover the key benefits that make our product a solid choice for modern developers and teams.
  </p>
</div>
</div>

Preview

Footer Section

text-base is used for section headings in the footer, while text-sm and text-xs are used for list links and the copyright note, respectively.

<footer class="bg-gray-900 text-white px-6 py-12">
  <div class="max-w-6xl mx-auto grid grid-cols-3 md:grid-cols-3 gap-6 text-sm">
    <div>
      <h4 class="text-base font-semibold mb-2">Company</h4>
      <ul>
        <li><a href="#" class="hover:underline">About</a></li>
        <li><a href="#" class="hover:underline">Careers</a></li>
        <li><a href="#" class="hover:underline">Contact</a></li>
      </ul>
    </div>
    <div>
      <h4 class="text-base font-semibold mb-2">Features</h4>
      <ul>
        <li><a href="#" class="hover:underline">Top analysis</a></li>
        <li><a href="#" class="hover:underline">Custome data</a></li>
        <li><a href="#" class="hover:underline">New data</a></li>
      </ul>
    </div>
    <div>
      <h4 class="text-base font-semibold mb-2">Pages</h4>
      <ul>
        <li><a href="#" class="hover:underline">Team</a></li>
        <li><a href="#" class="hover:underline">Blog</a></li>
        <li><a href="#" class="hover:underline">Mission</a></li>
      </ul>
    </div>
  </div>
  <p class="text-xs text-gray-400 text-center mt-8">© 2025 Your Company. All rights reserved.</p>
</footer>

Preview

Testimonial Card

The quote uses text-lg to emphasize the testimonial. The author’s name is text-base, and their title is text-sm, forming a clean size hierarchy.

<div class="flex justify-center items-center">
<div class="max-w-md p-6 bg-white rounded-xl shadow-md">
  <p class="text-lg italic leading-relaxed">
    “Using Tailwind’s typography utilities helped us ship faster and maintain consistent styles across components.”
  </p>
  <div class="mt-4">
    <p class="text-base font-semibold">Jane Doe</p>
    <p class="text-sm text-gray-500">Frontend Developer, Acme Inc.</p>
  </div>
</div>
</div>

Preview

Best Practices for Tailwind Font Sizing

Tailwind gives you flexibility, but here are some important guidelines to keep your typography consistent and effective:

- Use utility-first sizing before custom values – Stick to text-sm to text-9xl when possible. Use text-[18px] sparingly for overrides.

- Pair font sizes with matching line-heights – Avoid tight or loose spacing that breaks visual rhythm.

- Scale responsively, but meaningfully – Don't just scale for the sake of it; scale when readability or layout demands it.

- Use semantic tags and sizes together – Combine heading tags (h1, h2, etc.) with proper text-* classes for accessibility.

- Avoid nesting too many font size overrides – Especially inside components, keep it predictable and maintainable.

Tips & Gotchas

These practical reminders will save you headaches:

- Line-height doesn’t scale automatically – When changing font size at breakpoints, always revisit your leading-* classes.

- Text may appear different across browsers – Use antialiased or subpixel-antialiased for smoothing.

- Watch out for hardcoded pixel values – Arbitrary values like text-[22px] can break consistency.

- Use prose classes for long content – Tailwind Typography plugin offers pre-styled font sizing for content-heavy pages.

Tailwind Font Size Class Table

✨ What's Next?

Now that you’ve mastered Tailwind font size, try experimenting with:

• Tailwind font-family

Windframe Tailwind blocks

Landing page