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>

列印頁面