Tailwind CSS Stroke Width - GeeksforGeeks

Tailwind CSS Stroke Width

Last Updated : 4 Nov, 2026

The Stroke Width utilities in Tailwind CSS are used to set the width of the stroke (outline) of SVG shapes and text. These utilities correspond to the CSS stroke-width property.

  • stroke-0: Sets the stroke width to zero.
  • stroke-1: Sets the stroke width to one.
  • stroke-2: Sets the stroke width to two.
  • stroke-[<value>]: Sets the stroke width to a custom value, such as stroke-[1.5].
  • stroke-(length:<custom-property>): Sets the stroke width using a CSS custom property.

Syntax

<svg class="stroke-{width}">
    <!-- SVG shapes -->
</svg>

Example:

HTML 
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Stroke Width</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->

<body class="min-h-screen bg-gray-100 p-8 text-center">

    <h1 class="mb-4 text-3xl font-bold text-green-700">
        GeeksforGeeks
    </h1>

    <h2 class="mb-8 text-xl font-semibold">
        Tailwind CSS Stroke Width Classes
    </h2>

    <div class="mx-auto max-w-2xl rounded-lg bg-white p-6 shadow">
        <svg viewBox="0 0 420 130"
             class="mx-auto w-full"
             xmlns="http://www.w3.org/2000/svg">

            <circle cx="70" cy="60" r="35"
                    fill="none"
                    stroke="red"
                    class="stroke-0" />

            <circle cx="210" cy="60" r="35"
                    fill="none"
                    stroke="green"
                    class="stroke-1" />

            <circle cx="350" cy="60" r="35"
                    fill="none"
                    stroke="blue"
                    class="stroke-2" />

            <g fill="currentColor" font-size="14" text-anchor="middle">
                <text x="70" y="120">stroke-0</text>
                <text x="210" y="120">stroke-1</text>
                <text x="350" y="120">stroke-2</text>
            </g>
        </svg>
    </div>

</body>

<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->

Output: The example displays three circles with different stroke widths. The first circle (stroke-0) has no visible outline, the second circle (stroke-1) has a thin outline, and the third circle (stroke-2) has a thicker outline.

Comment

Explore