Tailwind CSS Font Weight - GeeksforGeeks

Tailwind CSS Font Weight

Last Updated : 28 Oct, 2026

Tailwind CSS provides utility classes to control the weight or thickness of text. These classes are alternatives to the CSS font-weight property. The displayed weight depends on the font family and the font weights supported by the loaded font.

The following classes are available in Tailwind CSS:

  • font-thin: Sets font-weight: 100.
  • font-extralight: Sets font-weight: 200.
  • font-light: Sets font-weight: 300.
  • font-normal: Sets font-weight: 400.
  • font-medium: Sets font-weight: 500.
  • font-semibold: Sets font-weight: 600.
  • font-bold: Sets font-weight: 700.
  • font-extrabold: Sets font-weight: 800.
  • font-black: Sets font-weight: 900.

Tailwind CSS also supports custom font weights using font-[<value>] and CSS custom properties using font-(weight:<custom-property>).

Syntax

<element class="font-{weight}">Text</element>

Replace {weight} with the required font weight, such as bold, medium, or thin.

Example: The following example demonstrates the font-weight utility classes using Tailwind CSS.

HTML 
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Font Weight</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->

<body class="bg-gray-100 p-6">
    <div class="mx-auto max-w-2xl rounded-lg bg-white p-6">
        <h1 class="mb-2 text-3xl font-bold text-green-600">
            Tailwind CSS Font Weight
        </h1>

        <p class="mb-4 text-gray-600">
            Examples of different font-weight utility classes.
        </p>

        <div class="space-y-3">
            <p class="font-thin">font-thin (100): A Computer Science Portal</p>
            <p class="font-extralight">font-extralight (200): A Computer Science Portal</p>
            <p class="font-light">font-light (300): A Computer Science Portal</p>
            <p class="font-normal">font-normal (400): A Computer Science Portal</p>
            <p class="font-medium">font-medium (500): A Computer Science Portal</p>
            <p class="font-semibold">font-semibold (600): A Computer Science Portal</p>
            <p class="font-bold">font-bold (700): A Computer Science Portal</p>
            <p class="font-extrabold">font-extrabold (800): A Computer Science Portal</p>
            <p class="font-black">font-black (900): A Computer Science Portal</p>
        </div>
    </div>
</body>

<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->

Output: The page displays the same text in nine different font weights, ranging from thin to black. The visible differences depend on the font available in the browser.

Comment

Explore