Tailwind CSS - Fill

Modern Guide to Tailwind CSS: Styling SVGs with Fill

This guide provides a modern approach to styling SVGs in Tailwind CSS, focusing on the fill utility. You’ll learn how to color SVGs, create theme-aware icons, and apply styles on hover.

Understanding SVG Fill

The fill property in SVG works like background-color for other HTML elements. It sets the color of the interior of an SVG shape. Tailwind’s fill-* utilities provide a powerful and consistent way to apply your project’s color palette to icons and other vector graphics.

Key Fill Utilities

While Tailwind offers fill utilities for its entire color palette, a few special classes are exceptionally useful:

Class	CSS Properties	Description
fill-current	fill: currentColor;	Most important. Fills the SVG with the current color (i.e., text color) of its parent. Essential for themeable icons.
fill-none	fill: none;	Makes the SVG fill transparent. Useful for outlined icons where only the stroke is colored.
fill-transparent	fill: transparent;	Fills the SVG with a transparent color.
fill-{color}-{shade}	fill: #...;	Fills the SVG with a specific color from your theme (e.g., fill-blue-500).

Practical Example: Creating a Themeable Button Icon

The fill-current utility is a game-changer. By using it, the SVG icon automatically inherits the text color of its parent button. When you change the button’s text color (e.g., on hover), the icon’s color updates too, with no extra CSS needed.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind SVG Fill Example</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">

    <h2 class="text-2xl font-bold">Themeable Icon with `fill-current`</h2>
    <button class="bg-indigo-600 text-white hover:bg-indigo-700 hover:text-yellow-300 px-6 py-3 rounded-lg flex items-center space-x-2 transition-colors duration-300">
        <!-- The SVG uses fill-current to inherit the button's text color -->
        <svg class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/>
        </svg>
        <span>Rate this Feature</span>
    </button>

    <h2 class="text-2xl font-bold">Direct Color Styling</h2>
    <div class="flex items-center space-x-6">
        <!-- Statically colored SVG -->
        <div>
            <p class="text-center mb-2 text-slate-600">`fill-green-500`</p>
            <svg class="h-12 w-12 fill-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
        </div>

        <!-- Statically colored SVG with hover effect -->
        <div>
            <p class="text-center mb-2 text-slate-600">`hover:fill-rose-500`</p>
            <svg class="h-12 w-12 fill-rose-300 hover:fill-rose-500 transition-colors cursor-pointer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
        </div>
    </div>
</body>
</html>

Best Practices for Styling SVGs

• Prefer fill-current: For icons used inside buttons, links, or other components, fill-current is almost always the best choice for flexibility and maintainability.
• Clean your SVGs: When exporting SVGs from design tools (like Figma or Illustrator), they often include hardcoded fill or stroke attributes. You must remove these from the <svg> or <path> tags for Tailwind’s classes to work correctly.
• Accessibility (A11y): Ensure the fill color has sufficient contrast against its background, especially for meaningful icons. The fill-current pattern helps with this, as you are typically controlling contrast at the parent text-level.
• Dark Mode: Combine fill utilities with the dark: prefix (dark:fill-gray-300) to adapt your icons for dark themes.