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)

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Terms Disclaimer About Us Contact Us