Tailwind CSS Font Weight Tutorial for Beginners

Font weight controls how thick or thin your text appears.

In traditional CSS, you would write:

font-weight: 700;

In Tailwind CSS, you simply use:

class="font-bold"

That’s it.

Tailwind makes typography simple, clean, and consistent.

In this guide, you’ll learn:

All font-weight classes
When to use each weight
How to apply responsive font weights
How to use custom values
A complete working example

Let’s start.

Default Font Weight Classes in Tailwind

Tailwind provides these built-in font-weight utilities:

Class	Weight	Description
font-thin	100	Very thin
font-extralight	200	Extra light
font-light	300	Light
font-normal	400	Default
font-medium	500	Slightly bold
font-semibold	600	Semi-bold
font-bold	700	Bold
font-extrabold	800	Extra bold
font-black	900	Very heavy

Basic Example

<p class="font-light">Light text</p>
<p class="font-normal">Normal text</p>
<p class="font-medium">Medium text</p>
<p class="font-semibold">Semi bold text</p>
<p class="font-bold">Bold text</p>

Use:

font-normal for paragraphs
font-medium for slightly emphasized text
font-semibold for section headings
font-bold for main headings

When to Use Each Font Weight

Here’s a practical guide:

Use font-normal

For body text and paragraphs.

Use font-medium

For labels, buttons, or highlighted words.

Use font-semibold

For subheadings.

Use font-bold

For main headings and strong emphasis.

Use font-black

For hero sections or attention-grabbing titles.

Responsive Font Weight

You can change font weight based on screen size.

Example:

<p class="font-normal md:font-bold">
  This becomes bold on medium screens
</p>

Meaning:

Mobile → normal weight
Tablet & Desktop → bold

This is useful for responsive layouts.

Custom Font Weight

If you need a custom value:

<p class="font-[1000]">
  Extra heavy text
</p>

Using CSS variables:

<p class="font-(weight:--my-font-weight)">
  Custom variable weight
</p>

This is useful when working with custom fonts that support additional weights.

Complete Working Example (Full Page Demo)

Copy and test this full example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Tailwind Font Weight Example</title>
  <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="bg-gray-100 p-10">

  <div class="max-w-3xl mx-auto bg-white p-8 rounded-lg shadow-lg">

    <!-- Main Heading -->
    <h1 class="text-4xl font-bold text-gray-800 mb-6">
      Tailwind CSS Font Weight Demo
    </h1>

    <!-- Subheading -->
    <h2 class="text-2xl font-semibold text-gray-700 mb-4">
      Understanding Font Thickness
    </h2>

    <!-- Paragraph -->
    <p class="font-normal text-gray-600 mb-4">
      This paragraph uses font-normal, which is ideal for body content.
    </p>

    <!-- Medium Text -->
    <p class="font-medium text-gray-800 mb-4">
      This text uses font-medium, slightly thicker than normal.
    </p>

    <!-- Bold Text -->
    <p class="font-bold text-blue-600 mb-4">
      This text uses font-bold to highlight important information.
    </p>

    <!-- Extra Bold -->
    <p class="font-extrabold text-red-600 mb-4">
      Extra bold text for strong emphasis.
    </p>

    <!-- Black -->
    <p class="font-black text-purple-700 mb-4">
      Ultra heavy text using font-black.
    </p>

    <!-- Responsive Example -->
    <div class="mt-6">
      <h3 class="text-lg font-semibold mb-2">
        Responsive Example
      </h3>
      <p class="font-normal md:font-bold text-gray-700">
        This text becomes bold on medium screens and above.
      </p>
    </div>

    <!-- Custom Weight -->
    <div class="mt-6">
      <h3 class="text-lg font-semibold mb-2">
        Custom Weight Example
      </h3>
      <p class="font-[1000] text-green-600">
        This text uses a custom font weight of 1000.
      </p>
    </div>

  </div>

</body>
</html>

This example demonstrates:

Different font weights
Headings and paragraphs
Responsive weight changes
Custom weight usage
Clean layout styling

Customizing Font Weights in Tailwind

You can extend your theme like this:

@theme {
  --font-weight-extrablack: 1000;
}

Then use:

<div class="font-extrablack">
  Extra heavy text
</div>

This is useful when working with custom design systems.

Best Practices

Don’t overuse bold text
Maintain hierarchy (Heading > Subheading > Paragraph)
Keep body text readable (font-normal or font-medium)
Use responsive font weights carefully
Test across devices

Typography balance improves professionalism.

Frequently Asked Questions

What is the default font weight in Tailwind?

font-normal (400).

How do I make text bold?

class="font-bold"

Can I use numeric font weights?

Yes:

class="font-[750]"

0 likes

Your Feedback

Help us improve by sharing your thoughts

Previous: Tailwind CSS Font Size Tutorial (Complete Guide for Beginners with Examples)

Next: Tailwind CSS Text Align Tutorial (Complete Beginner Guide with Examples)

Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.