0
0
Tailwindmarkup~5 mins

Font weight control in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Font weight control helps you make text look lighter or bolder. It changes how thick or thin the letters appear.

To make headings stand out by making them bold.
To make body text easier to read by using normal weight.
To highlight important words by making them heavier.
To create a visual hierarchy in a webpage.
To match a brand's style by adjusting text thickness.
Syntax
Tailwind
font-thin
font-extralight
font-light
font-normal
font-medium
font-semibold
font-bold
font-extrabold
font-black

Each class changes the font weight from very thin to very bold.

Use these classes on any text element like <p>, <h1>, or <span>.

Examples
Applies a very light font weight to the paragraph.
Tailwind
<p class="font-thin">This text is very thin.</p>
Makes the heading text thick and strong.
Tailwind
<h1 class="font-bold">This heading is bold.</h1>
Gives a balanced font weight, not too light or bold.
Tailwind
<span class="font-medium">Medium weight text here.</span>
Sample Program

This page shows different font weights using Tailwind CSS classes. Each paragraph uses a different font weight class to demonstrate how text thickness changes visually.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Font Weight Control Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
  <h1 class="font-black text-3xl mb-4">Font Weight Examples</h1>
  <p class="font-thin mb-2">This text is very thin.</p>
  <p class="font-light mb-2">This text is light.</p>
  <p class="font-normal mb-2">This text is normal weight.</p>
  <p class="font-semibold mb-2">This text is semi-bold.</p>
  <p class="font-bold mb-2">This text is bold.</p>
  <p class="font-extrabold mb-2">This text is extra bold.</p>
  <p class="font-black">This text is the heaviest black font weight.</p>
</body>
</html>
OutputSuccess
Important Notes

Font weight classes work best with fonts that support multiple weights.

Use font-normal to reset to normal weight if needed.

Combining font weight with size and color helps create clear text hierarchy.

Summary

Font weight control changes how thick or thin text looks.

Tailwind provides easy classes from font-thin to font-black.

Use these classes to make your text clear and visually appealing.