Bird
Raised Fist0
Tailwindmarkup~5 mins

Font size and scaling in Tailwind

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Font size and scaling help make text easy to read on different screens. It also keeps your website looking good on phones, tablets, and computers.

You want your website text to be bigger on a large screen and smaller on a phone.
You need headings to stand out more than regular text.
You want to keep text sizes consistent across your whole website.
You want to quickly change font sizes without writing custom CSS.
You want your text to adjust automatically when users zoom in or out.
Syntax
Tailwind
text-{size}

// Example sizes: xs, sm, base, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl

Use text-base for normal paragraph text.

Sizes like text-sm or text-lg make text smaller or bigger.

Examples
This makes the text smaller than normal.
Tailwind
<p class="text-sm">Small text</p>
This makes a very large heading.
Tailwind
<h1 class="text-4xl">Big heading</h1>
This is the default size for regular text.
Tailwind
<p class="text-base">Normal text</p>
This is very small text, useful for captions or notes.
Tailwind
<p class="text-xs">Extra small text</p>
Sample Program

This page shows different font sizes using Tailwind classes. You see a big heading, normal text, smaller text, bigger text, and extra small caption text.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Font Size and Scaling with Tailwind</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
  <h1 class="text-5xl font-bold mb-4">Big Heading</h1>
  <p class="text-base mb-2">This is normal paragraph text.</p>
  <p class="text-sm mb-2">This is smaller text for less important info.</p>
  <p class="text-lg mb-2">This is slightly bigger text for emphasis.</p>
  <p class="text-xs text-gray-600">This is extra small text, like a caption.</p>
</body>
</html>
OutputSuccess
Important Notes

Tailwind font sizes use rem units, so they scale well with user settings.

You can combine font size classes with font weight classes like font-bold for stronger emphasis.

Use responsive prefixes like sm:text-lg to change font size on small screens.

Summary

Use Tailwind's text-{size} classes to control font size easily.

Sizes range from text-xs (smallest) to text-9xl (largest).

Combine font size with other classes for better style and responsiveness.

Practice

(1/5)
1. Which Tailwind class sets the font size to extra small?
easy
A. text-xs
B. text-lg
C. text-3xl
D. text-base

Solution

  1. Step 1: Understand Tailwind font size naming

    Tailwind uses text-xs for extra small font size.

  2. Step 2: Match the class to the size

    Among the options, only text-xs means extra small.

  3. Final Answer:

    text-xs -> Option A

  4. Quick Check:

    Extra small font = text-xs [OK]
Hint: Extra small font always uses text-xs in Tailwind [OK]
Common Mistakes:
  • Confusing text-xs with text-base or text-lg
  • Thinking text-3xl is small instead of large
  • Assuming text-base is the smallest size
2. Which of these is the correct Tailwind class to make text very large, close to the largest size?
easy
A. text-2xl
B. text-sm
C. text-9xl
D. text-base

Solution

  1. Step 1: Recall Tailwind font size scale

    Tailwind font sizes go up to text-9xl for very large text.

  2. Step 2: Identify the largest size option

    Among the options, text-9xl is the largest size available.

  3. Final Answer:

    text-9xl -> Option C

  4. Quick Check:

    Largest font size = text-9xl [OK]
Hint: Largest font size in Tailwind is text-9xl [OK]
Common Mistakes:
  • Choosing text-2xl thinking it's the largest
  • Confusing text-sm as large
  • Using text-base which is default size
3. What font size will the following HTML render with Tailwind?
<p class="text-lg">Hello</p>
medium
A. Large font size
B. Small font size
C. Medium font size
D. Extra large font size

Solution

  1. Step 1: Understand the class text-lg

    The class text-lg in Tailwind means large font size, bigger than base.

  2. Step 2: Match the size description

    Among the options, "Large font size" best matches text-lg.

  3. Final Answer:

    Large font size -> Option A

  4. Quick Check:

    text-lg = Large font size [OK]
Hint: text-lg means large font size in Tailwind [OK]
Common Mistakes:
  • Thinking text-lg is medium or small
  • Confusing text-lg with text-xl or text-base
  • Ignoring the class and guessing default size
4. You want to make text smaller on mobile but larger on desktop using Tailwind. Which class combination is correct?
<p class="?">Responsive Text</p>
medium
A. text-lg sm:text-sm
B. text-sm md:text-lg
C. text-base lg:text-xs
D. text-xl md:text-xs

Solution

  1. Step 1: Understand Tailwind responsive prefixes

    Tailwind uses prefixes like md: to apply styles on medium screens and up.

  2. Step 2: Choose smaller text by default and larger on medium screens

    text-sm md:text-lg means small text on mobile and large text on medium+ screens.

  3. Final Answer:

    text-sm md:text-lg -> Option B

  4. Quick Check:

    Mobile small, desktop large = text-sm md:text-lg [OK]
Hint: Use mobile first: small text, then md: larger text [OK]
Common Mistakes:
  • Reversing sizes for mobile and desktop
  • Using wrong breakpoint prefixes
  • Not using responsive prefixes at all
5. You want a heading that scales smoothly from small on mobile to very large on desktop using Tailwind. Which class set achieves this best?
<h1 class="?">Scaling Heading</h1>
hard
A. text-3xl md:text-5xl lg:text-6xl
B. text-lg sm:text-xl md:text-2xl
C. text-xs sm:text-base md:text-lg
D. text-sm md:text-4xl lg:text-7xl

Solution

  1. Step 1: Identify scaling from small to very large

    We want text starting small on mobile, then bigger on medium, and very large on large screens.

  2. Step 2: Check each option's size progression

    text-sm md:text-4xl lg:text-7xl scales from text-sm (small), to text-4xl (large), to text-7xl (very large), matching the requirement.

  3. Final Answer:

    text-sm md:text-4xl lg:text-7xl -> Option D

  4. Quick Check:

    Small to very large scaling = text-sm md:text-4xl lg:text-7xl [OK]
Hint: Use increasing sizes with responsive prefixes for smooth scaling [OK]
Common Mistakes:
  • Choosing options with small max sizes
  • Not increasing size enough on larger screens
  • Using sizes that start too large on mobile