Tailwind CSS Stroke Width
In tailwind CSS, this class takes a large number of values and all of the properties are covered in the form. It is used to specify the width of an SVG shape's border. Only elements with a shape or text content components are eligible for this feature. We did this in CSS by using the Stroke-width parameter.
Stroke Width Classes
The various stroke width classes are as follows:
- Stroke-0: This class reduces the width of the stroke to zero.
- stroke-1: The stroke width was set to one with this class.
- stroke-2: The stroke width was adjusted to two with this class.
Syntax:
<svg class="stroke-{width}">...</svg>
Example
Example is as follows:
<!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-red-600 text-5xl font-bold"> Tutorial and Example </h1> <b>Stroke Width Class - Tailwind CSS </b> <div class="bg-red-800 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-yellow-900 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: