Skip to content
Related Articles

Related Articles

Improve Article

Tailwind CSS Font Weight

  • Last Updated : 16 Feb, 2021

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
Recommended Articles
Page :