Tailwind CSS - Text Decoration Thickness

Previous
Quiz
Next

Tailwind CSS Text Decoration Thicknessincludes predefined classes that control the thickness of lines around text and the visual weight applied to text elements, as well as the appearance of text decorations like underlines, overlines, and strikethroughs.

Tailwind CSS Text Decoration Thickness Classes

Below is a list of Tailwind CSS Text Decoration Thickness classes that include properties for styling text decorations such as underlines, line-throughs, and more.

Class CSS Properties
decoration-auto text-decoration-thickness: auto;
decoration-from-font text-decoration-thickness: from-font;
decoration-0 text-decoration-thickness: 0px;
decoration-1 text-decoration-thickness: 1px;
decoration-2 text-decoration-thickness: 2px;
decoration-4 text-decoration-thickness: 4px;
decoration-8 text-decoration-thickness: 8px;

Functionality Of Tailwind CSS Text Decoration Thickness Classes

  • decoration-auto: This class sets the text decoration thickness automatically based on the font size.
  • decoration-from-font: This class sets the text decoration thickness to match the thickness of the font itself.
  • decoration-0: This class removes any text decoration thickness, resulting in no visible underline or line-through.
  • decoration-1: This class applies a thin text decoration with a thickness of 1 pixel.
  • decoration-2: This class applies a medium text decoration with a thickness of 2 pixels.
  • decoration-4: This class applies a thick text decoration with a thickness of 4 pixels.
  • decoration-8: This class applies an extra thick text decoration with a thickness of 8 pixels.

Tailwind CSS Text Decoration Thickness Class Examples

Below are examples of Tailwind CSS Text Decoration classes that show how text decorations like underlines and strikethroughs can be styled with different thickness options.

Setting Text Decoration Thickness

This example shows how Tailwind CSS uses Text Decoration Thickness classes to control the thickness of lines applied to text using decoration classes such as underlines or strikethroughs, specifying specific pixel values.

Example

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

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Text Decoration Thickness
    </h2>

    <p class="underline decoration-auto mb-4">
        This text has decoration-auto thickness.
    </p>

    <p class="underline decoration-from-font mb-4">
        This text adjusts its decoration based on the font.
    </p>

    <p class="underline decoration-0 mb-4">
        This text has no visible decoration (0px thickness).
    </p>

    <p class="underline decoration-1 mb-4">
        This text has a thin decoration (1px thickness).
    </p>

    <p class="underline decoration-2 mb-4">
        This text has a medium decoration (2px thickness).
    </p>

    <p class="underline decoration-4 mb-4">
        This text has a thick decoration (4px thickness).
    </p>

    <p class="underline decoration-8">
        This text has an extra thick decoration (8px thickness).
    </p>
</body>

</html>

Text Decoration Thickness on Hover

The example shows how the Tailwind CSS Text Decoration Thickness applies the specified decoration thickness classes to dynamically change the thickness of text decorations on hover.

Example

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

<body class="p-4">

    <h1 class="text-3xl font-bold mb-4">
        Tailwind CSS Text Decoration Thickness 
    </h1>
    <p class="text-xl font-semibold mb-2 underline">
         Hover to see Text Decoration Thickness
    </p> 
    <p class="hover:underline decoration-auto mb-2">
        This sentence is decorated with decoration-auto thickness.
    </p>

    <p class="hover:underline decoration-from-font mb-2">
        This sentence is decorated with decoration-from-font thickness.
    </p>

    <p class="hover:underline decoration-0 mb-2">
        This sentence is decorated with decoration-0 thickness.
    </p>

    <p class="hover:underline decoration-1 mb-2">
        This sentence is decorated with decoration-1 thickness.
    </p>

    <p class="hover:underline decoration-2 mb-2">
        This sentence is decorated with decoration-2 thickness.
    </p>

    <p class="hover:underline decoration-4 mb-2">
        This sentence is decorated with decoration-4 thickness.
    </p>

    <p class="hover:underline decoration-8 mb-2">
        This sentence is decorated with decoration-8 thickness.
    </p>
</body>

</html>
Print Page
Previous
Next