Tailwind CSS - Font Weight

Previous
Quiz
Next

Font weight in Tailwind CSS is used to adjust the thickness and boldness of text by applying different weight values through predefined classes.

Tailwind CSS Font Weight Classes

Below is a list of Tailwind CSS classes that specify different font weights to control the thickness and boldness of text.

Class Properties
font-thin font-weight: 100;
font-extralight font-weight: 200;
font-light font-weight: 300;
font-normal font-weight: 400;
font-medium font-weight: 500;
font-semibold font-weight: 600;
font-bold font-weight: 700;
font-extrabold font-weight: 800;
font-black font-weight: 900;

Functionality Of Tailwind CSS Font Weight Classes

  • font-thin: Applies a weight of '100' to the text, making it very light.
  • font-extralight: Applies a weight of '200' to the text, making it extremely light.
  • font-light: Applies a weight of '300' to the text, making it lighter.
  • font-normal: Applies a weight of '400' to the text, maintaining a standard weight.
  • font-medium: Applies a weight of '500' to the text, making it somewhat bold.
  • font-semibold: Applies a weight of '600' to the text, adding a slightly heavier weight.
  • font-bold: Applies a weight of '700' to the text, making it noticeably bold.
  • font-extrabold: Applies a weight of '800' to the text, making it very bold.
  • font-black: Applies a weight of '900' to the text, setting the heaviest weight possible.

Tailwind CSS Font Weight Class Examples

Below are examples of Tailwind CSS Font weight classes, which allow you to adjust the thickness and boldness of text effortlessly.

Using Tailwind CSS for Text Weight Styling

This example shows how Tailwind CSS font weight classes can be used to adjust the appearance of text, from thin and light styles to bold and heavy weights, allowing you to control the thickness of text.

<!DOCTYPE html>
<html lang="en">
<head> 
     <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold mb-4">
    Tailwind CSS Font Weight 
    </h1>   
    <p class="font-thin mb-4">
        This text is styled with a thin font weight of 100.
    </p>  
    <p class="font-extralight mb-4">
        This text is styled with an extra-light font weight of 200.
    </p> 
    <p class="font-light mb-4">
        This text is styled with a light font weight of 300.
    </p>
    <p class="font-normal mb-4">
        This text is styled with a normal font weight of 400.
    </p>    
    <p class="font-medium mb-4">
        This text is styled with a medium font weight of 500.
    </p>
    <p class="font-semibold mb-4">
        This text is styled with a semi-bold font weight of 600.
    </p>
    <p class="font-bold mb-4">
        This text is styled with a bold font weight of 700.
    </p>
    <p class="font-extrabold mb-4">
        This text is styled with an extra-bold font weight of 800.
    </p>
    <p class="font-black">
        This text is styled with a black font weight of 900.
    </p>
</body>

</html>
Print Page
Previous
Next