Browser Support
Flex Direction
Flex Wrap
Flex
Flex Basis
Menu

Tailwind CSS Fill

The fill property in CSS is used to set the color of SVG shapes, such as paths, circles, rectangles, etc. Tailwind CSS provides fill-color-value utilities to add fill to the SVGs. This guide outlines the core usages, conditional applications, customization techniques, and more when working with Tailwind's fill utilities.

ClassPropertiesExample
fill-nonefill: none;<div className="fill-none"></div>
fill-inheritfill: inherit;<div className="fill-inherit"></div>
fill-currentfill: currentColor;<div className="fill-current"></div>
fill-transparentfill: transparent;<div className="fill-transparent"></div>
fill-blackfill: #000;<div className="fill-black"></div>
fill-whitefill: #fff;<div className="fill-white"></div>
fill-slate-50fill: #f8fafc;<div className="fill-slate-50"></div>
fill-slate-100fill: #f1f5f9;<div className="fill-slate-100"></div>
fill-slate-200fill: #e2e8f0;<div className="fill-slate-200"></div>
fill-slate-300fill: #cbd5e1;<div className="fill-slate-300"></div>
fill-slate-400fill: #94a3b8;<div className="fill-slate-400"></div>
fill-slate-500fill: #64748b;<div className="fill-slate-500"></div>
fill-slate-600fill: #475569;<div className="fill-slate-600"></div>
fill-slate-700fill: #334155;<div className="fill-slate-700"></div>
fill-slate-800fill: #1e293b;<div className="fill-slate-800"></div>
fill-slate-900fill: #0f172a;<div className="fill-slate-900"></div>
fill-slate-950fill: #020617;<div className="fill-slate-950"></div>
fill-gray-50fill: #f9fafb;<div className="fill-gray-50"></div>
fill-gray-100fill: #f3f4f6;<div className="fill-gray-100"></div>
fill-gray-200fill: #e5e7eb;<div className="fill-gray-200"></div>
fill-gray-300fill: #d1d5db;<div className="fill-gray-300"></div>
fill-gray-400fill: #9ca3af;<div className="fill-gray-400"></div>
fill-gray-500fill: #6b7280;<div className="fill-gray-500"></div>
fill-gray-600fill: #4b5563;<div className="fill-gray-600"></div>
fill-gray-700fill: #374151;<div className="fill-gray-700"></div>
fill-gray-800fill: #1f2937;<div className="fill-gray-800"></div>
fill-gray-900fill: #111827;<div className="fill-gray-900"></div>
fill-gray-950fill: #030712;<div className="fill-gray-950"></div>
fill-zinc-50fill: #fafafa;<div className="fill-zinc-50"></div>
fill-zinc-100fill: #f4f4f5;<div className="fill-zinc-100"></div>
fill-zinc-200fill: #e4e4e7;<div className="fill-zinc-200"></div>
fill-zinc-300fill: #d4d4d8;<div className="fill-zinc-300"></div>
fill-zinc-400fill: #a1a1aa;<div className="fill-zinc-400"></div>
fill-zinc-500fill: #71717a;<div className="fill-zinc-500"></div>
fill-zinc-600fill: #52525b;<div className="fill-zinc-600"></div>
fill-zinc-700fill: #3f3f46;<div className="fill-zinc-700"></div>
fill-zinc-800fill: #27272a;<div className="fill-zinc-800"></div>
fill-zinc-900fill: #18181b;<div className="fill-zinc-900"></div>
fill-zinc-950fill: #09090b;<div className="fill-zinc-950"></div>
fill-neutral-50fill: #fafafa;<div className="fill-neutral-50"></div>
fill-neutral-100fill: #f5f5f5;<div className="fill-neutral-100"></div>
fill-neutral-200fill: #e5e5e5;<div className="fill-neutral-200"></div>
fill-neutral-300fill: #d4d4d4;<div className="fill-neutral-300"></div>
fill-neutral-400fill: #a3a3a3;<div className="fill-neutral-400"></div>
fill-neutral-500fill: #737373;<div className="fill-neutral-500"></div>
fill-neutral-600fill: #525252;<div className="fill-neutral-600"></div>
fill-neutral-700fill: #404040;<div className="fill-neutral-700"></div>
fill-neutral-800fill: #262626;<div className="fill-neutral-800"></div>
fill-neutral-900fill: #171717;<div className="fill-neutral-900"></div>
fill-neutral-950fill: #0a0a0a;<div className="fill-neutral-950"></div>
fill-stone-50fill: #fafaf9;<div className="fill-stone-50"></div>
fill-stone-100fill: #f5f5f4;<div className="fill-stone-100"></div>
fill-stone-200fill: #e7e5e4;<div className="fill-stone-200"></div>
fill-stone-300fill: #d6d3d1;<div className="fill-stone-300"></div>
fill-stone-400fill: #a8a29e;<div className="fill-stone-400"></div>
fill-stone-500fill: #78716c;<div className="fill-stone-500"></div>
fill-stone-600fill: #57534e;<div className="fill-stone-600"></div>
fill-stone-700fill: #44403c;<div className="fill-stone-700"></div>
fill-stone-800fill: #292524;<div className="fill-stone-800"></div>
fill-stone-900fill: #1c1917;<div className="fill-stone-900"></div>
fill-stone-950fill: #0c0a09;<div className="fill-stone-950"></div>
fill-red-50fill: #fef2f2;<div className="fill-red-50"></div>
fill-red-100fill: #fee2e2;<div className="fill-red-100"></div>
fill-red-200fill: #fecaca;<div className="fill-red-200"></div>
fill-red-300fill: #fca5a5;<div className="fill-red-300"></div>
fill-red-400fill: #f87171;<div className="fill-red-400"></div>
fill-red-500fill: #ef4444;<div className="fill-red-500"></div>
fill-red-600fill: #dc2626;<div className="fill-red-600"></div>
fill-red-700fill: #b91c1c;<div className="fill-red-700"></div>
fill-red-800fill: #991b1b;<div className="fill-red-800"></div>
fill-red-900fill: #7f1d1d;<div className="fill-red-900"></div>
fill-red-950fill: #450a0a;<div className="fill-red-950"></div>
fill-orange-50fill: #fff7ed;<div className="fill-orange-50"></div>
fill-orange-100fill: #ffedd5;<div className="fill-orange-100"></div>
fill-orange-200fill: #fed7aa;<div className="fill-orange-200"></div>
fill-orange-300fill: #fdba74;<div className="fill-orange-300"></div>
fill-orange-400fill: #fb923c;<div className="fill-orange-400"></div>
fill-orange-500fill: #f97316;<div className="fill-orange-500"></div>
fill-orange-600fill: #ea580c;<div className="fill-orange-600"></div>
fill-orange-700fill: #c2410c;<div className="fill-orange-700"></div>
fill-orange-800fill: #9a3412;<div className="fill-orange-800"></div>
fill-orange-900fill: #7c2d12;<div className="fill-orange-900"></div>
fill-orange-950fill: #431407;<div className="fill-orange-950"></div>
fill-amber-50fill: #fffbeb;<div className="fill-amber-50"></div>
fill-amber-100fill: #fef3c7;<div className="fill-amber-100"></div>
fill-amber-200fill: #fde68a;<div className="fill-amber-200"></div>
fill-amber-300fill: #fcd34d;<div className="fill-amber-300"></div>
fill-amber-400fill: #fbbf24;<div className="fill-amber-400"></div>
fill-amber-500fill: #f59e0b;<div className="fill-amber-500"></div>
fill-amber-600fill: #d97706;<div className="fill-amber-600"></div>
fill-amber-700fill: #b45309;<div className="fill-amber-700"></div>
fill-amber-800fill: #92400e;<div className="fill-amber-800"></div>
fill-amber-900fill: #78350f;<div className="fill-amber-900"></div>
fill-amber-950fill: #451a03;<div className="fill-amber-950"></div>
fill-yellow-50fill: #fefce8;<div className="fill-yellow-50"></div>
fill-yellow-100fill: #fef9c3;<div className="fill-yellow-100"></div>
fill-yellow-200fill: #fef08a;<div className="fill-yellow-200"></div>
fill-yellow-300fill: #fde047;<div className="fill-yellow-300"></div>
fill-yellow-400fill: #facc15;<div className="fill-yellow-400"></div>
fill-yellow-500fill: #eab308;<div className="fill-yellow-500"></div>
fill-yellow-600fill: #ca8a04;<div className="fill-yellow-600"></div>
fill-yellow-700fill: #a16207;<div className="fill-yellow-700"></div>
fill-yellow-800fill: #854d0e;<div className="fill-yellow-800"></div>
fill-yellow-900fill: #713f12;<div className="fill-yellow-900"></div>
fill-yellow-950fill: #422006;<div className="fill-yellow-950"></div>
fill-lime-50fill: #f7fee7;<div className="fill-lime-50"></div>
fill-lime-100fill: #ecfccb;<div className="fill-lime-100"></div>
fill-lime-200fill: #d9f99d;<div className="fill-lime-200"></div>
fill-lime-300fill: #bef264;<div className="fill-lime-300"></div>
fill-lime-400fill: #a3e635;<div className="fill-lime-400"></div>
fill-lime-500fill: #84cc16;<div className="fill-lime-500"></div>
fill-lime-600fill: #65a30d;<div className="fill-lime-600"></div>
fill-lime-700fill: #4d7c0f;<div className="fill-lime-700"></div>
fill-lime-800fill: #3f6212;<div className="fill-lime-800"></div>
fill-lime-900fill: #365314;<div className="fill-lime-900"></div>
fill-lime-950fill: #1a2e05;<div className="fill-lime-950"></div>
fill-green-50fill: #f0fdf4;<div className="fill-green-50"></div>
fill-green-100fill: #dcfce7;<div className="fill-green-100"></div>
fill-green-200fill: #bbf7d0;<div className="fill-green-200"></div>
fill-green-300fill: #86efac;<div className="fill-green-300"></div>
fill-green-400fill: #4ade80;<div className="fill-green-400"></div>
fill-green-500fill: #22c55e;<div className="fill-green-500"></div>
fill-green-600fill: #16a34a;<div className="fill-green-600"></div>
fill-green-700fill: #15803d;<div className="fill-green-700"></div>
fill-green-800fill: #166534;<div className="fill-green-800"></div>
fill-green-900fill: #14532d;<div className="fill-green-900"></div>
fill-green-950fill: #052e16;<div className="fill-green-950"></div>
fill-emerald-50fill: #ecfdf5;<div className="fill-emerald-50"></div>
fill-emerald-100fill: #d1fae5;<div className="fill-emerald-100"></div>
fill-emerald-200fill: #a7f3d0;<div className="fill-emerald-200"></div>
fill-emerald-300fill: #6ee7b7;<div className="fill-emerald-300"></div>
fill-emerald-400fill: #34d399;<div className="fill-emerald-400"></div>
fill-emerald-500fill: #10b981;<div className="fill-emerald-500"></div>
fill-emerald-600fill: #059669;<div className="fill-emerald-600"></div>
fill-emerald-700fill: #047857;<div className="fill-emerald-700"></div>
fill-emerald-800fill: #065f46;<div className="fill-emerald-800"></div>
fill-emerald-900fill: #064e3b;<div className="fill-emerald-900"></div>
fill-emerald-950fill: #022c22;<div className="fill-emerald-950"></div>
fill-teal-50fill: #f0fdfa;<div className="fill-teal-50"></div>
fill-teal-100fill: #ccfbf1;<div className="fill-teal-100"></div>
fill-teal-200fill: #99f6e4;<div className="fill-teal-200"></div>
fill-teal-300fill: #5eead4;<div className="fill-teal-300"></div>
fill-teal-400fill: #2dd4bf;<div className="fill-teal-400"></div>
fill-teal-500fill: #14b8a6;<div className="fill-teal-500"></div>
fill-teal-600fill: #0d9488;<div className="fill-teal-600"></div>
fill-teal-700fill: #0f766e;<div className="fill-teal-700"></div>
fill-teal-800fill: #115e59;<div className="fill-teal-800"></div>
fill-teal-900fill: #134e4a;<div className="fill-teal-900"></div>
fill-teal-950fill: #042f2e;<div className="fill-teal-950"></div>
fill-cyan-50fill: #ecfeff;<div className="fill-cyan-50"></div>
fill-cyan-100fill: #cffafe;<div className="fill-cyan-100"></div>
fill-cyan-200fill: #a5f3fc;<div className="fill-cyan-200"></div>
fill-cyan-300fill: #67e8f9;<div className="fill-cyan-300"></div>
fill-cyan-400fill: #22d3ee;<div className="fill-cyan-400"></div>
fill-cyan-500fill: #06b6d4;<div className="fill-cyan-500"></div>
fill-cyan-600fill: #0891b2;<div className="fill-cyan-600"></div>
fill-cyan-700fill: #0e7490;<div className="fill-cyan-700"></div>
fill-cyan-800fill: #155e75;<div className="fill-cyan-800"></div>
fill-cyan-900fill: #164e63;<div className="fill-cyan-900"></div>
fill-cyan-950fill: #083344;<div className="fill-cyan-950"></div>
fill-sky-50fill: #f0f9ff;<div className="fill-sky-50"></div>
fill-sky-100fill: #e0f2fe;<div className="fill-sky-100"></div>
fill-sky-200fill: #bae6fd;<div className="fill-sky-200"></div>
fill-sky-300fill: #7dd3fc;<div className="fill-sky-300"></div>
fill-sky-400fill: #38bdf8;<div className="fill-sky-400"></div>
fill-sky-500fill: #0ea5e9;<div className="fill-sky-500"></div>
fill-sky-600fill: #0284c7;<div className="fill-sky-600"></div>
fill-sky-700fill: #0369a1;<div className="fill-sky-700"></div>
fill-sky-800fill: #075985;<div className="fill-sky-800"></div>
fill-sky-900fill: #0c4a6e;<div className="fill-sky-900"></div>
fill-sky-950fill: #082f49;<div className="fill-sky-950"></div>
fill-blue-50fill: #eff6ff;<div className="fill-blue-50"></div>
fill-blue-100fill: #dbeafe;<div className="fill-blue-100"></div>
fill-blue-200fill: #bfdbfe;<div className="fill-blue-200"></div>
fill-blue-300fill: #93c5fd;<div className="fill-blue-300"></div>
fill-blue-400fill: #60a5fa;<div className="fill-blue-400"></div>
fill-blue-500fill: #3b82f6;<div className="fill-blue-500"></div>
fill-blue-600fill: #2563eb;<div className="fill-blue-600"></div>
fill-blue-700fill: #1d4ed8;<div className="fill-blue-700"></div>
fill-blue-800fill: #1e40af;<div className="fill-blue-800"></div>
fill-blue-900fill: #1e3a8a;<div className="fill-blue-900"></div>
fill-blue-950fill: #172554;<div className="fill-blue-950"></div>
fill-indigo-50fill: #eef2ff;<div className="fill-indigo-50"></div>
fill-indigo-100fill: #e0e7ff;<div className="fill-indigo-100"></div>
fill-indigo-200fill: #c7d2fe;<div className="fill-indigo-200"></div>
fill-indigo-300fill: #a5b4fc;<div className="fill-indigo-300"></div>
fill-indigo-400fill: #818cf8;<div className="fill-indigo-400"></div>
fill-indigo-500fill: #6366f1;<div className="fill-indigo-500"></div>
fill-indigo-600fill: #4f46e5;<div className="fill-indigo-600"></div>
fill-indigo-700fill: #4338ca;<div className="fill-indigo-700"></div>
fill-indigo-800fill: #3730a3;<div className="fill-indigo-800"></div>
fill-indigo-900fill: #312e81;<div className="fill-indigo-900"></div>
fill-indigo-950fill: #1e1b4b;<div className="fill-indigo-950"></div>
fill-violet-50fill: #f5f3ff;<div className="fill-violet-50"></div>
fill-violet-100fill: #ede9fe;<div className="fill-violet-100"></div>
fill-violet-200fill: #ddd6fe;<div className="fill-violet-200"></div>
fill-violet-300fill: #c4b5fd;<div className="fill-violet-300"></div>
fill-violet-400fill: #a78bfa;<div className="fill-violet-400"></div>
fill-violet-500fill: #8b5cf6;<div className="fill-violet-500"></div>
fill-violet-600fill: #7c3aed;<div className="fill-violet-600"></div>
fill-violet-700fill: #6d28d9;<div className="fill-violet-700"></div>
fill-violet-800fill: #5b21b6;<div className="fill-violet-800"></div>
fill-violet-900fill: #4c1d95;<div className="fill-violet-900"></div>
fill-violet-950fill: #2e1065;<div className="fill-violet-950"></div>
fill-purple-50fill: #faf5ff;<div className="fill-purple-50"></div>
fill-purple-100fill: #f3e8ff;<div className="fill-purple-100"></div>
fill-purple-200fill: #e9d5ff;<div className="fill-purple-200"></div>
fill-purple-300fill: #d8b4fe;<div className="fill-purple-300"></div>
fill-purple-400fill: #c084fc;<div className="fill-purple-400"></div>
fill-purple-500fill: #a855f7;<div className="fill-purple-500"></div>
fill-purple-600fill: #9333ea;<div className="fill-purple-600"></div>
fill-purple-700fill: #7e22ce;<div className="fill-purple-700"></div>
fill-purple-800fill: #6b21a8;<div className="fill-purple-800"></div>
fill-purple-900fill: #581c87;<div className="fill-purple-900"></div>
fill-purple-950fill: #3b0764;<div className="fill-purple-950"></div>
fill-fuchsia-50fill: #fdf4ff;<div className="fill-fuchsia-50"></div>
fill-fuchsia-100fill: #fae8ff;<div className="fill-fuchsia-100"></div>
fill-fuchsia-200fill: #f5d0fe;<div className="fill-fuchsia-200"></div>
fill-fuchsia-300fill: #f0abfc;<div className="fill-fuchsia-300"></div>
fill-fuchsia-400fill: #e879f9;<div className="fill-fuchsia-400"></div>
fill-fuchsia-500fill: #d946ef;<div className="fill-fuchsia-500"></div>
fill-fuchsia-600fill: #c026d3;<div className="fill-fuchsia-600"></div>
fill-fuchsia-700fill: #a21caf;<div className="fill-fuchsia-700"></div>
fill-fuchsia-800fill: #86198f;<div className="fill-fuchsia-800"></div>
fill-fuchsia-900fill: #701a75;<div className="fill-fuchsia-900"></div>
fill-fuchsia-950fill: #4a044e;<div className="fill-fuchsia-950"></div>
fill-pink-50fill: #fdf2f8;<div className="fill-pink-50"></div>
fill-pink-100fill: #fce7f3;<div className="fill-pink-100"></div>
fill-pink-200fill: #fbcfe8;<div className="fill-pink-200"></div>
fill-pink-300fill: #f9a8d4;<div className="fill-pink-300"></div>
fill-pink-400fill: #f472b6;<div className="fill-pink-400"></div>
fill-pink-500fill: #ec4899;<div className="fill-pink-500"></div>
fill-pink-600fill: #db2777;<div className="fill-pink-600"></div>
fill-pink-700fill: #be185d;<div className="fill-pink-700"></div>
fill-pink-800fill: #9d174d;<div className="fill-pink-800"></div>
fill-pink-900fill: #831843;<div className="fill-pink-900"></div>
fill-pink-950fill: #500724;<div className="fill-pink-950"></div>
fill-rose-50fill: #fff1f2;<div className="fill-rose-50"></div>
fill-rose-100fill: #ffe4e6;<div className="fill-rose-100"></div>
fill-rose-200fill: #fecdd3;<div className="fill-rose-200"></div>
fill-rose-300fill: #fda4af;<div className="fill-rose-300"></div>
fill-rose-400fill: #fb7185;<div className="fill-rose-400"></div>
fill-rose-500fill: #f43f5e;<div className="fill-rose-500"></div>
fill-rose-600fill: #e11d48;<div className="fill-rose-600"></div>
fill-rose-700fill: #be123c;<div className="fill-rose-700"></div>
fill-rose-800fill: #9f1239;<div className="fill-rose-800"></div>
fill-rose-900fill: #881337;<div className="fill-rose-900"></div>
fill-rose-950fill: #4c0519;<div className="fill-rose-950"></div>

Overview of Fill

Adding the Fill

To add fill to the SVG, use fill-color-value utilities like fill-blue-400, fill-red-500, fill-pink-600, etc.

This is a live editor. Play around with it!
export default function SVGFillDemo() {
  return (
    <div className="flex items-center justify-center h-screen w-screen bg-gray-100">
      {/* SVG Element with Tailwind Fill */}
      <svg
        className="fill-blue-400 w-20 h-20"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
      >
        <path d="M12 5C7.03 5 3 9.03 3 14s4.03 9 9 9 9-4.03 9-9-4.03-9-9-9z" />
      </svg>
    </div>
  );
}

States and Responsiveness

Tailwind's utility classes can be used for conditional states for interactivity and responsive designs. You can use state modifiers like sm, md, etc. for the states and responsive modifiers like sm, lg, etc. to target individual screens.

Hover and Focus States

You can conditionally adjust the fill values of SVGs when users interact with them. Below is a practical JSX illustration where the fill color changes on hover.

This is a live editor. Play around with it!
export default function SVGHoverDemo() {
  return (
    <div className="flex items-center justify-center h-screen w-screen bg-gray-200">
      <svg
        className="fill-blue-400 hover:fill-green-400 w-20 h-20"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
      >
        <path d="M12 5C7.03 5 3 9.03 3 14s4.03 9 9 9 9-4.03 9-9-4.03-9-9-9z" />
      </svg>
    </div>
  );
}

Breakpoint Modifiers

Responsive designs often call for different styling based on screen size. Tailwind accommodates this by enabling breakpoint-specific fills directly in markup. Here’s an example:

This is a live editor. Play around with it!
export default function SVGResponsiveFill() {
  return (
    <div className="flex items-center justify-center h-screen w-screen bg-gray-50">
      <svg
        className="fill-blue-400 md:fill-green-400 lg:fill-red-400 w-20 h-20"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
      >
        <path d="M12 5C7.03 5 3 9.03 3 14s4.03 9 9 9 9-4.03 9-9-4.03-9-9-9z" />
      </svg>
    </div>
  );
}

Custom Fill

While Tailwind CSS already provides a significant range of fill utilities, there might be cases where custom values are necessary. This section explains how to extend the Tailwind theme and use arbitrary values for unique styling requirements.

Extending the Theme

By customizing the theme.extend configuration in your tailwind.config.js, you can add custom SVG fills. Custom tokens are reusable, preserving design consistency.

Using the below configuration, you can use fill-brand-green in your code:

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function SVGCustomFill() {
  return (
    <div className="flex items-center justify-center h-screen w-screen">
      <svg
        className="fill-brand-green w-16 h-16"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
      >
        <circle cx="12" cy="12" r="8" />
      </svg>
    </div>
  );
}

Using Arbitrary Values

When precise control is needed without adding tokens to your theme, Tailwind's arbitrary values provide an efficient shortcut. Assign any valid CSS color to the fill property:

This is a live editor. Play around with it!
export default function SVGArbitraryFill() {
  return (
    <div className="flex items-center justify-center h-screen w-screen">
      <svg
        className="fill-[#1e90ff] w-16 h-16"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
      >
        <rect x="4" y="4" width="16" height="16" />
      </svg>
    </div>
  );
}

Real World Examples

Interactive Social Share Buttons

A component that displays social media share buttons with dynamic fill colors on hover.

This is a live editor. Play around with it!
const SocialShareButtons = () => {
  const socialData = [
    { name: 'Twitter', color: 'fill-blue-400', hoverColor: 'group-hover:fill-blue-600', 
      path: 'M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z' },
    { name: 'Facebook', color: 'fill-indigo-400', hoverColor: 'group-hover:fill-indigo-600',
      path: 'M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z' },
    { name: 'LinkedIn', color: 'fill-blue-500', hoverColor: 'group-hover:fill-blue-700',
      path: 'M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z' },
    { name: 'GitHub', color: 'fill-gray-600', hoverColor: 'group-hover:fill-gray-800',
      path: 'M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12' },
    { name: 'Instagram', color: 'fill-pink-400', hoverColor: 'group-hover:fill-pink-600',
      path: 'M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z' },
    { name: 'YouTube', color: 'fill-red-400', hoverColor: 'group-hover:fill-red-600',
      path: 'M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z' }
  ];

  return (
    <div className="flex justify-center space-x-4 p-4">
      {socialData.map((social) => (
        <button
          key={social.name}
          className="group p-2 rounded-full hover:bg-gray-100 transition-colors"
          aria-label={`Share on ${social.name}`}
        >
          <svg
            className={`w-6 h-6 ${social.color} ${social.hoverColor} transition-colors`}
            viewBox="0 0 24 24"
          >
            <path d={social.path} />
          </svg>
        </button>
      ))}
    </div>
  );
};

export default SocialShareButtons;

Progress Timeline

A vertical timeline component with fill animations to show progress through different stages of a process.

This is a live editor. Play around with it!
const ProgressTimeline = () => {
  const timelineData = [
    { 
      stage: 'Order Placed',
      date: '2024-01-10',
      status: 'completed',
      description: 'Your order has been confirmed and processed'
    },
    { 
      stage: 'Payment Verified',
      date: '2024-01-11',
      status: 'completed',
      description: 'Payment has been successfully processed'
    },
    { 
      stage: 'In Production',
      date: '2024-01-12',
      status: 'completed',
      description: 'Your items are being prepared and packaged'
    },
    { 
      stage: 'Quality Check',
      date: '2024-01-13',
      status: 'active',
      description: 'Performing final quality inspections'
    },
    { 
      stage: 'Shipping',
      date: '2024-01-14',
      status: 'pending',
      description: 'Package will be handed to courier partner'
    },
    { 
      stage: 'Delivered',
      date: '2024-01-15',
      status: 'pending',
      description: 'Expected delivery to your location'
    }
  ];

  return (
    <div className="p-4">
      {timelineData.map((item, index) => (
        <div key={item.stage} className="relative flex pb-8">
          <div className="absolute inset-0 flex items-center justify-center w-6 h-full -ml-3">
            <div 
                className={`w-0.5 ${item.status !== 'pending' ? 'fill-blue-500' : ''} transition-all duration-500`} 
                style={{height: item.status === 'completed' ? '100%' : item.status === 'active' ? '50%' : '0%'}}
              />
            </div>
          <div className={`relative flex items-center justify-center flex-shrink-0 w-6 h-6 rounded-full ${
            item.status === 'completed' ? 'fill-blue-500' : 
            item.status === 'active' ? 'fill-blue-200' : 'fill-gray-200'
          } transition-colors duration-300`}>
            <svg className="w-4 h-4 text-white" viewBox="0 0 20 20">
              <path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/>
            </svg>
          </div>
          <div className="ml-4">
            <h4 className="font-medium">{item.stage}</h4>
            <p className="text-sm text-gray-500">{item.description}</p>
            <span className="text-xs text-gray-400">{item.date}</span>
          </div>
        </div>
      ))}
    </div>
  );
};

export default ProgressTimeline;

Interactive Feature Grid

A grid of feature cards with dynamic fill patterns that respond to hover.

This is a live editor. Play around with it!
const FeatureGrid = () => {
  const features = [
    {
      title: "Cloud Storage",
      description: "Secure and scalable storage for all your files",
      icon: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12",
      activeColor: "group-hover:fill-cyan-500"
    },
    {
      title: "Analytics",
      description: "Detailed insights and performance metrics",
      icon: "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z",
      activeColor: "group-hover:fill-purple-500"
    },
    {
      title: "Security",
      description: "Advanced encryption and protection",
      icon: "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z",
      activeColor: "group-hover:fill-green-500"
    },
    {
      title: "Automation",
      description: "Streamline your workflow processes",
      icon: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15",
      activeColor: "group-hover:fill-orange-500"
    },
    {
      title: "Integration",
      description: "Connect with your favorite tools",
      icon: "M13 10V3L4 14h7v7l9-11h-7z",
      activeColor: "group-hover:fill-blue-500"
    },
    {
      title: "Support",
      description: "24/7 dedicated customer assistance",
      icon: "M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z",
      activeColor: "group-hover:fill-red-500"
    }
  ];

  return (
    <div className="grid grid-cols-2 gap-4 p-4">
      {features.map((feature) => (
        <div
          key={feature.title}
          className="group relative rounded-lg p-6 transition-all duration-300 hover:shadow-lg"
        >
          <div className={`absolute inset-0 opacity-10 rounded-lg transition-all duration-300`} />
          <svg
            className={`w-8 h-8 mb-4 transition-colors duration-300 ${feature.activeColor}`}
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={feature.icon} />
          </svg>
          <h3 className="font-semibold text-lg mb-2">{feature.title}</h3>
          <p className="text-gray-600 text-sm">{feature.description}</p>
        </div>
      ))}
    </div>
  );
};

export default FeatureGrid;

Interactive Menu Icons

A navbar component that features menu icons which change fill colors on hover.

This is a live editor. Play around with it!
const NavigationMenu = () => {
  const menuItems = [
    { id: 'home', icon: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6', label: 'Home' },
    { id: 'search', icon: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z', label: 'Search' },
    { id: 'messages', icon: 'M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z', label: 'Messages' },
    { id: 'notifications', icon: 'M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9', label: 'Notifications' },
    { id: 'bookmarks', icon: 'M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z', label: 'Bookmarks' },
    { id: 'profile', icon: 'M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z', label: 'Profile' }
  ];

  return (
    <nav className="bg-white p-4 rounded-lg shadow-lg max-w-[450px]">
      <ul className="flex justify-between items-center">
        {menuItems.map((item) => (
          <li key={item.id} className="group">
            <button className="p-2 rounded-lg transition-colors">
              <svg
                className="w-6 h-6 fill-gray-400 group-hover:fill-blue-500 transition-colors"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path d={item.icon} />
              </svg>
            </button>
          </li>
        ))}
      </ul>
    </nav>
  );
};

export default NavigationMenu;

Feature Comparison Tiles

A grid of feature comparison tiles with dynamic fill states.

This is a live editor. Play around with it!
const FeatureComparison = () => {
  const features = [
    {
      name: "Cloud Storage",
      tiers: {
        free: "5GB",
        pro: "100GB",
        enterprise: "Unlimited"
      },
      icon: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
    },
    {
      name: "Team Members",
      tiers: {
        free: "3",
        pro: "10",
        enterprise: "Unlimited"
      },
      icon: "M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
    },
    {
      name: "Analytics",
      tiers: {
        free: "Basic",
        pro: "Advanced",
        enterprise: "Custom"
      },
      icon: "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
    },
    {
      name: "Support",
      tiers: {
        free: "Email",
        pro: "Priority",
        enterprise: "24/7"
      },
      icon: "M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"
    },
    {
      name: "Security",
      tiers: {
        free: "Basic",
        pro: "Advanced",
        enterprise: "Enterprise"
      },
      icon: "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
    },
    {
      name: "Integration",
      tiers: {
        free: "3",
        pro: "20+",
        enterprise: "Custom"
      },
      icon: "M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z"
    }
  ];

  return (
    <div className="p-4 max-w-[450px]">
      <div className="grid grid-cols-3 gap-4">
        {features.map((feature) => (
          <div
            key={feature.name}
            className="relative group cursor-pointer"
          >
            <div className="relative p-4 bg-white rounded-lg border border-gray-200 group-hover:border-transparent group-hover:bg-gray-900 transition-colors duration-300">
              <svg viewBox="0 0 24 24" className="w-6 h-6 fill-gray-500 group-hover:fill-red-400 transition-colors duration-300">
                <path d={feature.icon} />
              </svg>
              <h3 className="mt-2 font-medium text-sm group-hover:text-white transition-colors duration-300">
                {feature.name}
              </h3>
              <div className="mt-2 space-y-1">
                {Object.entries(feature.tiers).map(([tier, value]) => (
                  <div
                    key={tier}
                    className="text-xs group-hover:text-orange-200 transition-colors duration-300"
                  >
                    {tier}: {value}
                  </div>
                ))}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default FeatureComparison;

Customization Examples

Gradient Fill Button Component

This example demonstrates how to create a custom gradient fill button with hover effects by extending the fill property in the theme configuration.

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function GradientButton() {
  return (
    <div className="flex items-center justify-center h-screen bg-gray-100">
      <button className="relative group">
        <svg className="w-64 h-16">
          <defs>
            <linearGradient id="buttonGradient" x1="0" x2="1" y1="0" y2="1">
              <stop offset="0%" stopColor="#4F46E5" />
              <stop offset="100%" stopColor="#7C3AED" />
            </linearGradient>
            <linearGradient id="buttonGradientHover" x1="1" x2="0" y1="1" y2="0">
              <stop offset="0%" stopColor="#7C3AED" />
              <stop offset="100%" stopColor="#4F46E5" />
            </linearGradient>
          </defs>
          <rect
            className="fill-gradient-primary group-hover:fill-gradient-hover transition-all duration-300"
            width="100%"
            height="100%"
            rx="8"
          />
          <text
            x="50%"
            y="50%"
            dominantBaseline="middle"
            textAnchor="middle"
            className="fill-white font-bold text-lg"
          >
            Gradient Button
          </text>
        </svg>
      </button>
    </div>
  )
}

Interactive Social Icon Fill

This example shows how to create animated social media icons with custom fill colors and hover states.

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function SocialIcons() {
  return (
    <div className="flex items-center justify-center gap-8 h-screen bg-gray-50">
      <div className="flex space-x-6">
        {['twitter', 'linkedin', 'github'].map((platform) => (
          <div
            key={platform}
            className="transform hover:scale-110 transition-transform duration-300"
          >
            <svg
              className={`w-12 h-12 fill-gray-400 hover:fill-social-${platform} transition-colors duration-300`}
              viewBox="0 0 24 24"
            >
              {platform === 'twitter' && (
                <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" />
              )}
              {platform === 'linkedin' && (
                <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z M2 9h4v12H2z M4 6a2 2 0 1 1-2 2 2 2 0 0 1 2-2z" />
              )}
              {platform === 'github' && (
                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
              )}
            </svg>
          </div>
        ))}
      </div>
    </div>
  )
}

Animated Progress Indicator

This example demonstrates a custom progress indicator with animated fill patterns and dynamic content.

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function ProgressIndicator() {
  return (
    <div className="flex flex-col items-center justify-center h-screen bg-gray-50">
      <div className="w-96 space-y-8">
        {[30, 60, 100].map((progress) => (
          <div key={progress} className="relative">
            <svg className="w-full h-4">
              <rect
                className="fill-progress-base"
                width="100%"
                height="100%"
                rx="2"
              />
              <rect
                className="fill-progress-active transition-all duration-1000 ease-in-out"
                width={`${progress}%`}
                height="100%"
                rx="2"
              >
                <animate
                  attributeName="width"
                  from="0"
                  to={`${progress}%`}
                  dur="1.5s"
                  fill="freeze"
                />
              </rect>
              <text
                x="50%"
                y="50%"
                dominantBaseline="middle"
                textAnchor="middle"
                className="fill-gray-700 text-xs font-medium"
              >
                {`${progress}% Complete`}
              </text>
            </svg>
            <div className="mt-2 text-sm text-gray-600">
              {progress === 100
                ? 'Task Completed'
                : `Processing ${progress}% of the task`}
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

Best Practices

Maintain Design Consistency

Design consistency is vital when working with Tailwind CSS Fill utilities. By standardizing how and when you use Fill classes, you help create a unified experience that aligns well with the broader visual language of your application.

The first step to achieving this involves establishing style guidelines for your SVG elements. For example, you might define a specific set of brand colors for fills, such as fill-blue-500 or fill-red-600, and instruct your team to apply only those classes when working on icons or vector backgrounds.

When multiple team members contribute to the same project, consistent usage of Fill classes helps everyone quickly recognize and apply the correct styles.

Leverage Utility Combinations

You can achieve sophisticated designs by pairing Fill classes with complementary utilities such as stroke, stroke-width, rounded, shadow, and even responsive modifiers.

For example, if you want an icon to appear bolder and more prominent on larger screens, you could pair fill-* with stroke-1 lg:stroke-2, achieving a layered effect that adjusts with screen size.

By experimenting with different combinations, you can create designs that not only look polished but also adapt to various dimensions.

Accessibility Considerations

Enhance Readability and Navigability

Accessibility should guide every design decision, and the way you apply Fill to SVGs is no exception. Readability and navigability often depends upon the clarity of icons. Fill utilities can either improve or diminish accessibility based on how they’re applied.

Choosing distinct colors for fills that clearly contrast with backgrounds is essential to ensure that icons don’t blend into the page or become indistinguishable. Equally important is leveraging size classes alongside fill to confirm that icons are large enough to be recognized by individuals with limited vision.

Support Accessible Interactive Elements

Interactive elements—such as buttons, toggles, and hyperlinks—rely heavily on clear signaling to guide user actions. By using Fill utilities effectively, you can create visual cues that reinforce the interactive state of an element.

For instance, when designing an icon button, you could apply different fill colors for default and hover/focus states. This variation in color not only looks dynamic but also informs users that the element is clickable or otherwise interactive.

Debugging Common Issues

Resolve Common Problems

When working extensively with Tailwind CSS Fill utilities, you may encounter various unexpected behaviors. A straightforward way to begin debugging is to methodically remove or disable recently applied classes to isolate the cause of the anomaly.

For example, if an icon’s fill color is not updating, confirm that you’re using the correct utility (e.g., fill-red-500, fill-blue-500) and check for any conflicts with other color or stroke utilities. Sometimes, an inadvertently applied stroke class or misconfigured parent container can override the intended fill.

Iterative Testing and Maintenance

A rigorous approach to testing and maintenance helps prevent small fill-related changes from causing large-scale regressions elsewhere. When you introduce or modify Fill utilities, start by testing the impact on critical interface components, such as navigation menus, brand logos, and key interactive icons.

If possible, approach it systematically: open a local environment, verify that the icons still display correctly, then proceed through different breakpoints to confirm responsive design continuity. Commit changes in small, logical increments, to quickly identify which commit introduced a bug if a fill color or icon alignment breaks.

User SelectStroke

Resources

DocsBlogEmail Templates

Legal Stuff

Terms & ConditionsPrivacy PolicyAcceptable Use Policy