0
0
Tailwindmarkup~5 mins

Font size and scaling in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
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.