Tailwind CSS - Text Decoration Thickness

Tailwind CSS Text Decoration Thickness包含预定义类，用于控制文本周围线条的粗细、应用于文本元素的视觉粗细，以及下划线、上划线和删除线等文本装饰的外观。

Tailwind CSS Text Decoration Thickness 类

以下是 Tailwind CSS Text Decoration Thickness 文本装饰粗细类的列表，其中包含用于设置文本装饰样式(例如下划线、删除线等)的属性。

Tailwind CSS 文本装饰粗细类的功能

• decoration-auto:此类根据字体大小自动设置文本装饰粗细。
• decoration-from-font:此类将文本装饰粗细设置为与字体本身的粗细相匹配。
• decoration-0:此类删除所有文本装饰粗细，导致下划线或穿线不可见。
• decoration-1:此类应用粗细为 1 像素的细文本装饰。
• decoration-2:此类应用粗细为 2 像素的中等文本装饰。
• decoration-4:此类应用粗细为 4 像素的粗文本装饰像素。
• decoration-8:此类应用厚度为 8 像素的超厚文本装饰。

Tailwind CSS 文本装饰厚度类示例

以下是 Tailwind CSS 文本装饰类的示例，展示了如何使用不同的厚度选项来设置下划线和删除线等文本装饰的样式。

设置文本装饰厚度

此示例展示了 Tailwind CSS 如何使用文本装饰厚度类来控制应用于文本的线条厚度，例如使用下划线或删除线等装饰类，并指定特定的像素值。

示例

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

悬停时的文本装饰粗细

此示例展示了 Tailwind CSS 文本装饰粗细如何应用指定的装饰粗细类来动态更改悬停时的文本装饰粗细。

示例

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