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"
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: