Tailwind Fill

The fill utility in Tailwind sets the SVG fill color — basically, it controls how SVG shapes (like icons or illustrations) are painted.

The fill-{color} utility class in Tailwind CSS allows you to set the fill color of SVG elements. With Tailwind's fill-{color} class, you can easily customize the fill color of SVG icons or graphics.

How to apply Tailwind Fill Color

To apply a specific fill color to an SVG element, you can use the fill-{color} utility class, where {color} represents the desired fill color. The {color} can be any valid CSS color value, such as a color name (red, blue), a hexadecimal code (#FF0000, #0000FF), or an RGB value (rgb(255, 0, 0)). Here's an example:

<svg class="fill-purple-500">
	<path d="..." />
</svg>

Preview

Responsive Fill Color

Tailwind CSS allows you to apply fill color classes responsively at different breakpoints. To use responsive fill color classes, you can append the breakpoint prefix to the utility class. For example, md:fill-blue sets the fill color to blue starting from the medium breakpoint and above.

<svg class="fill-red md:fill-blue">
	<path d="..." />
</svg>

Preview

In the above example, the fill color of the SVG element is set to red by default (fill-red), but starting from the medium breakpoint and above, it changes to blue (md:fill-blue).

Interaction State (hover/focus)

Fully supported — and super useful.

<svg
	class="fill-gray-400 hover:fill-indigo-600 focus:fill-indigo-600 transition-colors"
	...
></svg>

Preview

Tip: Pair with transition-colors for smooth fades.

Customization in tailwind.config.js

Extend the colors theme to add your own fill values:

// tailwind.config.js
module.exports = {
	theme: {
		extend: {
			colors: {
				brand: {
					DEFAULT: "#1A202C",
					light: "#4A5568",
				},
			},
		},
	},
};

Real UI Component Examples

Notification badge with fill-blue-500 icon

<div class="flex items-center space-x-3 p-3 bg-white rounded shadow max-w-sm">
	<svg class="w-6 h-6 fill-blue-500" viewBox="0 0 24 24" fill="currentColor">
		<path
			d="M12 2C10.343 2 9 3.343 9 5v1.068C6.164 6.559 4 9.03 4 12v5H2v2h20v-2h-2v-5c0-2.97-2.164-5.441-5-5.932V5c0-1.657-1.343-3-3-3zM12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2z"
		/>
	</svg>
	<span class="text-gray-800 text-sm font-medium">3 new notifications</span>
</div>

Preview

Notice how fill-blue-500 directly affects the color of the bell icon.

🧭 2. Themed Logo Component

<a href="/" class="flex items-center space-x-2">
	<svg
		class="w-8 h-8 fill-blue-600 dark:fill-white transition-colors"
		viewBox="0 0 24 24"
	>
		<circle cx="12" cy="12" r="10" />
	</svg>
	<span class="text-xl font-bold text-blue-800 dark:text-white">FlowCorp</span>
</a>

Preview

Works great with dark: variants for logo color inversion.

📈 3. Data Chart Marker or Legend Item

<div class="flex items-center space-x-2">
	<svg class="w-4 h-4 fill-green-500" viewBox="0 0 10 10">
		<circle cx="5" cy="5" r="5" />
	</svg>
	<span class="text-sm text-gray-700">Completed Tasks</span>
</div>

Preview

Best Practices for Devs/Designers

• Use fill-current when you want the SVG to inherit the text color (text-* controls it).

• Don’t hardcode fill inside SVGs unless needed. Prefer keeping styles in classes for reusability.

• Combine fill with transition-colors and hover: for subtle interactivity.

• If designing icons, consider if the fill color should adapt to theme or parent — inherit, currentColor, and Tailwind’s color utilities all have different roles.

Accessibility Notes

• Screen readers don’t care about fill color — only about aria-label, <title>, or role="img".

• Always make sure your icons have accessible meaning if they’re not purely decorative.

• Contrast matters: If you're using filled icons as indicators (like warnings or status), make sure the fill color passes contrast guidelines against the background.

Tailwind Fill Class Table

✨ What's Next?

You can check out this Tailwind classes

• Tailwind Text color

• Tailwind Background color

Windframe Tailwind blocks

Logo