Tailwind CSS - SVG 描邊寬度

Tailwind CSS SVG 描邊寬度實用程式類用於設定 SVG 元素的描邊寬度。可以使用三種描邊寬度來設定 SVG 描邊的寬度。

Tailwind CSS SVG 描邊寬度類

以下是 **Tailwind CSS SVG 描邊寬度** 類列表，它提供了一種有效處理 SVG 元素描邊的方式。

類	CSS 屬性
stroke-0	stroke-width: 0;
stroke-1	stroke-width: 1;
stroke-2	stroke-width: 2;

Tailwind CSS SVG 描邊類的功能

**stroke-0:** 此類用於將描邊級別設定為 0。
**stroke-1:** 此類用於將描邊級別設定為 1。
**stroke-2:** 此類用於將描邊級別設定為 2。

Tailwind CSS SVG 描邊寬度類示例

以下示例說明了 Tailwind CSS SVG 描邊寬度類實用程式。

設定 SVG 描邊寬度

在此示例中，我們將建立三個 SVG 元素，並使用 Tailwind CSS SVG 描邊寬度類為它們應用描邊寬度。

示例

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-xl mb-3">
        Tailwind CSS SVG Stroke Width Class
    </h2>
    <p class="mt-4 text-lg">Bell SVG stroke-0 Class</p>
    <svg class="stroke-0 fill-transparent stroke-blue-500 h-12" 
         viewBox="0 0 46 48" 
         xmlns="http://www.w3.org/2000/svg">
        <path stroke-rule="evenodd" 
              clip-rule="evenodd" 
              d="M23.0002 0C12.5068 0 4.00017 8.50659 4.00017 
                 19V32.5335C4.00017 32.8383 3.9145 3.1371 
                 3.75292 33.3956L0.912672 37.94C0.0801118 
                 39.2721 1.0378 41 2.60867 41H4.3917C44.9625 
                 41 45.9202 39.2721 45.0877 37.94L42.2474 
                 33.3956C42.0858 33.1371 4.0002 32.8383 42.0002 
                 32.5335V19C42.0002 8.50659 33.4936 0 23.0002 
                 0ZM23.000248C20.2388 48 18.0002 45.7614 18.0002 
                 43H28.0002C28.0002 45.7614 25.7616 48 2.0002 48Z">
        </path>
    </svg>
    <p class="mt-4 text-lg">Bell SVG stroke-1 Class</p>
    <svg class="stroke-1 fill-transparent stroke-blue-500 h-12" 
         viewBox="0 0 46 48" 
         xmlns="http://www.w3.org/2000/svg">
        <path stroke-rule="evenodd" 
              clip-rule="evenodd" 
              d="M23.0002 0C12.5068 0 4.00017 8.50659 4.00017 
                 19V32.5335C4.00017 32.8383 3.9145 3.1371 
                 3.75292 33.3956L0.912672 37.94C0.0801118 
                 39.2721 1.0378 41 2.60867 41H4.3917C44.9625 
                 41 45.9202 39.2721 45.0877 37.94L42.2474 
                 33.3956C42.0858 33.1371 4.0002 32.8383 42.0002 
                 32.5335V19C42.0002 8.50659 33.4936 0 23.0002 
                 0ZM23.000248C20.2388 48 18.0002 45.7614 18.0002 
                 43H28.0002C28.0002 45.7614 25.7616 48 2.0002 48Z">
        </path>
    </svg>
    <p class="mt-4 text-lg">Bell SVG stroke-2 Class</p>
    <svg class="stroke-2 fill-transparent stroke-blue-500 h-12" 
         viewBox="0 0 46 48" 
         xmlns="http://www.w3.org/2000/svg">
        <path stroke-rule="evenodd" 
              clip-rule="evenodd" 
              d="M23.0002 0C12.5068 0 4.00017 8.50659 4.00017 
                 19V32.5335C4.00017 32.8383 3.9145 3.1371 
                 3.75292 33.3956L0.912672 37.94C0.0801118 
                 39.2721 1.0378 41 2.60867 41H4.3917C44.9625 
                 41 45.9202 39.2721 45.0877 37.94L42.2474 
                 33.3956C42.0858 33.1371 4.0002 32.8383 42.0002 
                 32.5335V19C42.0002 8.50659 33.4936 0 23.0002 
                 0ZM23.000248C20.2388 48 18.0002 45.7614 18.0002 
                 43H28.0002C28.0002 45.7614 25.7616 48 2.0002 48Z">
        </path>
    </svg>
</body>

</html>

條件 SVG 描邊寬度

在以下示例中，我們將建立一個 SVG 元素，並設定一個條件以在懸停時更改描邊寬度。通常，SVG 元素將具有特定顏色的 1 描邊寬度，而在懸停時，它將更改為 2 描邊寬度。

示例

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

<body class="p-4">
    <h2 class="text-xl mb-3">
        Tailwind CSS SVG Stroke Width Class
    </h2>
    <p class="mt-4 text-lg">Hover Over the Bell</p>
    <svg class="stroke-1 fill-transparent stroke-green-600 
                hover:stroke-2 h-12" 
         viewBox="0 0 46 48" 
         xmlns="http://www.w3.org/2000/svg">
        <path stroke-rule="evenodd" 
              clip-rule="evenodd" 
              d="M23.0002 0C12.5068 0 4.00017 8.50659 4.00017 
                 19V32.5335C4.00017 32.8383 3.9145 3.1371 
                 3.75292 33.3956L0.912672 37.94C0.0801118 
                 39.2721 1.0378 41 2.60867 41H4.3917C44.9625 
                 41 45.9202 39.2721 45.0877 37.94L42.2474 
                 33.3956C42.0858 33.1371 4.0002 32.8383 42.0002 
                 32.5335V19C42.0002 8.50659 33.4936 0 23.0002 
                 0ZM23.000248C20.2388 48 18.0002 45.7614 18.0002 
                 43H28.0002C28.0002 45.7614 25.7616 48 2.0002 48Z">
        </path>
    </svg>
    
</body>

</html>

列印頁面