Skip to content
Related Articles

Related Articles

Tailwind CSS Font Weight

Improve Article
Save Article
  • Last Updated : 23 Mar, 2022
Improve Article
Save Article

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:

HTML




<!DOCTYPE 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>

Output:


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!