Skip to content
Related Articles

Related Articles

Tailwind CSS Stroke Width

View Discussion
Improve Article
Save Article
  • 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.


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



<!DOCTYPE html> 
    <link href
<body class="text-center mx-4 space-y-2"
    <h1 class="text-green-600 text-5xl font-bold"
    <b>Tailwind CSS Stroke Width Class</b
    <div class="bg-green-900 m-24 grid grid-flow-col"
        <svg height="150px" width="500px"
         <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" /> 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!