Open In App

Tailwind CSS Font Weight

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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:



Last Updated : 23 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads