Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - SVG Stroke Width

Quiz

Tailwind CSS SVG Stroke Width utility class that used to set stroke width the SVG elements. There are three stroke widths that can be used to set the width of the SVG stroke.

Tailwind CSS SVG Stroke Width Classes

The following is the list of Tailwind CSS SVG Stroke Width classes that provides an effective way of handling SVG elements stroke.

Class	CSS Properties
stroke-0	stroke-width: 0;
stroke-1	stroke-width: 1;
stroke-2	stroke-width: 2;

Functionality of Tailwind CSS SVG Stroke Classes

stroke-0: This class is used to set the stroke level at 0.
stroke-1: This class is used to set the stroke level at 1.
stroke-2: This class is used to set the stroke level at 2.

Tailwind CSS SVG Stroke Width Class Examples

The following example illustrates the Tailwind CSS SVG Stroke Width class utility.

Setting SVG Stroke Width

Here in this example, we will create three SVG elements and apply stroke widths to them using Tailwind CSS SVG stroke width classes.

Example

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

Conditional SVG Stroke Width

In this following example, we will create a SVG element and set a condition to change the stroke width on hover. Normally, the SVG element will have a stroke width of 1 with a particular color, and on hover, it will change to a stroke width of 2.

Example

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

Print Page