Tailwind Fill – A Comprehensive Guide
In this article, we are going to look closely at Tailwind Fill property with examples in order to gain a clear understanding.
Using Tailwind Fill, we can set the color of an SVG.
This utility is often used to create colored SVG icons or logos.
In traditional CSS, we use the fill property to achieve this.
This class accepts multiple values in Tailwind CSS, where all the properties are covered in class form.
Syntax
<svg class="fill-current">....</svg>
Tailwind Fill Classes
| Classes | Overview |
| fill-none | In this case, SVG elements have no fill color. An SVG icon with a transparent background is often created with this class. |
| fill-inherit | The element will inherit the fill color of its parent element. |
| fill-current | This class is used to set the fill property of an SVG element to the current text color, which means that the element will have the same fill color as the surrounding text. |
| fill-transparent | The fill property of an SVG element is set to transparent using this class. |
| fill-black | As a result, the resulting SVG icon is black in color. |
| fill-white | Using this class, the SVG icon is set to white color. |
| fill-slate-50 | The purpose of this class is to assign grayish blue color to an SVG file. |
| fill-gray-50 | This class is utilized to assign a gray color to an SVG. |
| fill-zinc-50 | The resulting SVG icon uses the color grayish green. |
| fill-neutral-50 | The resulting SVG is grayish neutral in color. |
| fill-stone-50 | As a result of this class, the SVG is grayish brown in color. |
| fill-red-50 | The SVG icons using this class are red in color. |
| fill-orange-50 | Orange color is used for the SVG icon. |
| fill-amber-50 | The SVG color is set to amber using this class. |
| fill-yellow-50 | This class is utilized to apply yellow color to SVG icons. |
| fill-lime-50 | The purpose of this class is to set the color of an SVG to lime. |
| fill-green-50 | The fill property of an SVG is set to green using this class. |
| fill-emerald-50 | It sets the SVG color to a shade of green. |
| fill-teal-50 | In this case, the SVG icons are blueish-green in color. |
| fill-cyan-50 | This class is used to set the SVG icon color to cyan. |
| fill-sky-50 | It sets the SVG color to a shade of blue. |
| fill-blue-50 | Blue color is used to display the SVG icon. |
| fill-indigo-50 | The resulting SVG’s color is set to indigo |
| fill-violet-50 | SVG icons are represented using violet color. |
| fill-purple-50 | This class is utilized to set the SVG color to purple. |
| fill-fuchsia-50 | Pinkish-purple color is used to display the SVG icon. |
| fill-pink-50 | Pink color is selected for the representation of an SVG icon. |
| fill-rose-50 | The purpose of this class is to set the color of an SVG to rose. |
Note: The color values range from 50-900, with increments of 100 after 100.
In the following example ,the Tailwind fill is demonstrated using fill-blue, fill-current and fill-rose classes:
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-medium my-2">Fill Class in Tailwind CSS</p>
<div class="bg-gray-200 m-4 grid grid-flow-col gap-4 p-5 rounded-md">
<svg height="150px" width="500px" xmlns="http://www.mrexamples.com/2000/svg" version="1.1">
<circle class="fill-blue-600" cx="100" cy="100" r="40"></circle>
<circle class="fill-current text-green-600" cx="250" cy="100" r="40"></circle>
<circle class="fill-rose-400" cx="400" cy="100" r="40"></circle>
</svg>
</div>
</body>
</html>
The following example utilizes the fill-teal, fill-stone and fill-emerald classes in Tailwind fill:
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-medium my-2">Fill Class in Tailwind CSS</p>
<div class="bg-gray-200 m-4 grid grid-flow-col gap-4 p-5 rounded-md">
<svg height="150px" width="500px" xmlns="http://www.mrexamples.com/2000/svg" version="1.1">
<circle class="fill-teal-600" cx="100" cy="100" r="40"></circle>
<circle class="fill-stone-500" cx="250" cy="100" r="40"></circle>
<circle class="fill-emerald-400" cx="400" cy="100" r="40"></circle>
</svg>
</div>
</body>
</html>
Let’s explore the Tailwind fill using fill-orange, fill-amber and fill-yellow through an example:
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-medium my-2">Fill Class in Tailwind CSS</p>
<div class="bg-gray-200 m-4 grid grid-flow-col gap-4 p-5 rounded-md">
<svg height="150px" width="500px" xmlns="http://www.mrexamples.com/2000/svg" version="1.1">
<circle class="fill-orange-600" cx="100" cy="100" r="40"></circle>
<circle class="fill-amber-500" cx="250" cy="100" r="40"></circle>
<circle class="fill-yellow-400" cx="400" cy="100" r="40"></circle>
</svg>
</div>
</body>
</html>
We value your feedback.
+1
1
+1
1
+1
+1
+1
+1
+1
