How to Change the Stroke Width of an SVG Element in Tailwind CSS?
Last Updated :
24 Sep, 2024
Stroke Width of an SVG Element is a key property that defines the thickness of the outline for shapes like circles, rectangles, and paths. In Tailwind CSS, adjusting the stroke width is simple and can be done using utility classes. Tailwind provides a range of built-in classes, along with the flexibility to use arbitrary values, enabling precise control over stroke thickness for SVG elements without custom CSS.
These are the following approaches to changing the stroke width of an SVG element in Tailwind CSS:
Using stroke-[value] Class
In this approach, we are using the stroke-[value] class provided by Tailwind CSS to control the stroke width of SVG elements. By specifying the stroke width inside square brackets (e.g., stroke-[1], stroke-[3], stroke-[5]), we can apply different stroke widths directly to the SVG without the need for custom CSS.
Syntax:
stroke-[<value>]
Example: The below example uses the stroke-[value] Class to change the stroke width of an SVG element in Tailwind CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
change the stroke width
</title>
<script src="https://cdn.tailwindcss.com">
</script>
</head>
<body class="bg-gray-100 flex flex-col items-center
justify-center min-h-screen space-y-8">
<h1 class="text-4xl font-bold text-green-500">
GeeksforGeeks
</h1>
<h3 class="text-2xl font-semibold text-gray-700">
Approach 1: Using `stroke-[value]` Class </h3>
<div class="flex space-x-4">
<svg class="h-16 w-16 stroke-black stroke-[1]"
fill="none" viewbox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="10">
</circle>
</svg>
<svg class="h-16 w-16 stroke-black stroke-[3]"
fill="none" viewbox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="10">
</circle>
</svg>
<svg class="h-16 w-16 stroke-black stroke-[5]"
fill="none" viewbox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="10">
</circle>
</svg>
</div>
</body>
</html>
Output:
Approach 1: OutputUsing stroke-width-[value] for Arbitrary Values
In this approach, we are using the stroke-width-[value] class in Tailwind CSS to apply arbitrary stroke widths to various SVG shapes. This allows us to specify precise stroke widths directly within the class (e.g., stroke-width-[2], stroke-width-[4], stroke-width-[6]) without relying on predefined values, giving us more flexibility in styling SVG elements.
Syntax:
stroke-width-[<value>]
Example: The below example uses the stroke-width-[value] Class to change the stroke width of an SVG element in Tailwind CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Chaging the width</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex flex-col items-center
justify-center min-h-screen space-y-8">
<h1 class="text-4xl font-bold text-green-500">GeeksforGeeks</h1>
<h3 class="text-2xl font-semibold text-gray-700">
Approach 2: Using `stroke-width-[value]` for Arbitrary Values</h3>
<div class="flex flex-col items-center space-y-4">
<div class="flex space-x-4">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-16 w-16 stroke-black stroke-width-[2]"
fill="none"
viewBox="0 0 24 24">
<line x1="2" y1="22" x2="22" y2="2" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg"
class="h-16 w-16 stroke-red-500 stroke-width-[4]"
fill="none"
viewBox="0 0 24 24">
<rect x="3" y="3" width="18" height="18" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg"
class="h-16 w-16 stroke-blue-500 stroke-width-[6]"
fill="none"
viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10" />
</svg>
</div>
<div class="flex space-x-4">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-16 w-16 stroke-green-500 stroke-width-[1.5]"
fill="none"
viewBox="0 0 24 24">
<polygon points="12,2 2,22 22,22" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg"
class="h-16 w-16 stroke-yellow-500 stroke-width-[3]"
fill="none"
viewBox="0 0 24 24">
<path d="M12 2 L2 22 L12 17 L22 22 Z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg"
class="h-16 w-16 stroke-purple-500 stroke-width-[5]"
fill="none"
viewBox="0 0 24 24">
<ellipse cx="12" cy="12" rx="8" ry="4" />
</svg>
</div>
</div>
</body>
</html>
Output:
Approach 2: Output
Similar Reads
How to change the width on hover using Tailwind CSS ? In this article, we will change the width on hover using Tailwind. There is no inbuilt method in Tailwind, so you have to customize the tailwind.config.js file. Let's discuss the whole process further in this article.By default, tailwind CSS only generates responsive variants for width utilities. To
3 min read
How to create scrollable element in Tailwind without a scrollbar ? Creating a scrollable element without a visible scrollbar in Tailwind CSS can provide a sleeker UI, reducing clutter and maintaining a clean aesthetic while still allowing users to interact with content via scrolling. To create a scrollable element in Tailwind CSS without a visible scrollbar, apply
6 min read
How to change svg icon colors with Tailwind CSS ? SVG stands for Scalable Vector Graphics and is an XML-based ( can be edited ) vector image format. SVG is commonly used for icons, animations, interactive charts, graphs, and other dynamic graphics in the browser. As it is XML-based, you can easily edit or change the SVG icon colors with Tailwind. A
3 min read
How to Change Style of Scrollbar using Tailwind CSS? By default, Tailwind CSS does not include built-in utilities for styling scrollbars. However, you can customize the appearance of scrollbars using traditional CSS in combination with Tailwind's utility classes. This is achieved by using the scrollbar-* classes to customize aspects like scrollbar wid
3 min read
How to Set Width Transition in Tailwind CSS ? In Tailwind CSS, setting a width transition allows for smooth animation when an element's width changes. It enhances the user experience by gradually transitioning the width over a specified duration, creating a polished effect. Tailwind's utility classes make implementing transitions simple.Approac
2 min read
How to Customize the Font Size in Tailwind CSS ? Customizing font size in Tailwind CSS involves using the text-[size] utility class, where [size] can be predefined size identifiers like xs, sm, md, lg, xl, or numerical values. Additionally, you can extend the default font sizes in the configuration file for more customization.Syntax<p class="te
2 min read