Skip to content
Related Articles

Related Articles

Improve Article
Tailwind CSS Stroke Width
  • Last Updated : 22 Mar, 2021

This class accepts lots of value in tailwind CSS in which all the properties are covered in form.  This class is used to set the width of a border in an SVG shape. This property can only be applied to elements that have a shape or text content elements. In CSS, we did that by using the CSS Stroke-width property.

Stroke Width classes:

  • stroke-0: This class set the stroke width to zero.
  • stroke-1: This class set the stroke width to one.
  • stroke-2: This class set the stroke width to two.

Syntax:

<svg class="stroke-{width}">...</svg>

Example:

HTML




<!DOCTYPE html> 
<html
<head
    <link href
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
        rel="stylesheet"
</head
  
<body class="text-center mx-4 space-y-2"
    <h1 class="text-green-600 text-5xl font-bold"
        GeeksforGeeks 
    </h1
    <b>Tailwind CSS Stroke Width Class</b
    <div class="bg-green-900 m-24 grid grid-flow-col"
        <svg height="150px" width="500px"
      xmlns="http://www.w3.org/2000/svg"
      version="1.1"
         <circle class="stroke-current text-red-600 stroke-0" 
              cx="100" cy="70" r="50" /> 
         <circle class="stroke-current text-green-600 stroke-1" 
              cx="250" cy="70" r="50" /> 
         <circle class="stroke-current text-blue-600 stroke-2" 
              cx="400" cy="70" r="50" /> 
        </svg
    </div
</body
  
</html

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :