Tailwind CSS - 文本装饰粗细

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

Tailwind CSS 文本装饰粗细类

下面列出了 Tailwind CSS 文本装饰粗细类，其中包含用于设置下划线、删除线等文本装饰样式的属性。

类	CSS 属性
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;

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>

打印页面