Tailwind CSS Font Weight

Last Updated : 17 Jul, 2024

This class accepts lots of value in tailwind CSS in which all the properties are covered in class form. It is the alternative to the CSS font-weight property. This class is used to set the weight or thickness of the font being used with the HTML Text. The font-weight applied will depend on the font-family used in the browser. For example, some font-family is available only in specific weights.

Font weight classes:

font-thin: This class sets the font-weight to 100.
font-extralight: This class sets the font-weight to 200.
font-light: This class sets the font-weight to 300.
font-normal: This class sets the font-weight to 400.
font-medium: This class sets the font-weight to 500.
font-semibold: This class sets the font-weight to 600.
font-bold: This class sets the font-weight to 700.
font-extrabold: This class sets the font-weight to 800.
font-black: This class sets the font-weight to 900.

Note: Change the weight in the component with the required weight mentioned above.

Syntax:

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

Example:

<!DOCTYPE html>
<html>

<head>
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>

<body class="text-center mx-4 space-y-2">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>

    <b>Tailwind CSS Font Weight Class</b>

    <div class="mx-24 bg-green-200">
        <p class="p-2 text-justify">
            font-thin:
            <span class="font-thin pl-10">
                A Computer Science portal for Geeks
            </span>
        </p>

        <p class="p-2 text-justify">font-normal:
            <span class="font-normal pl-4">
                A Computer Science portal for Geeks
            </span>
        </p>

        <p class="p-2 text-justify">font-medium:
            <span class="font-medium pl-2">
                A Computer Science portal for Geeks
            </span>
        </p>

        <p class="p-2 text-justify">font-bold:
            <span class="font-bold pl-8">
                A Computer Science portal for Geeks
            </span>
        </p>

        <p class="p-2 text-justify">font-black:
            <span class="font-black pl-6">
                A Computer Science portal for Geeks
            </span>
        </p>
    </div>
</body>

</html>