ContextQMD
Back to Tailwindcss

Fill

src/docs/fill.mdx

latest3.5 KB
Original Source

import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourThemeColors, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import colors from "./utils/colors";

export const title = "fill"; export const description = "Utilities for styling the fill of SVG elements.";

<ApiTable rows={[ ["fill-none", "fill: none;"], ["fill-inherit", "fill: inherit;"], ["fill-current", "fill: currentColor;"], ["fill-transparent", "fill: transparent;"], ...Object.entries(colors).map(([name, value]) => [fill-${name}, fill: var(--color-${name}); /* ${value} */]), ["fill-(<custom-property>)", "fill: var(<custom-property>);"], ["fill-[<color>]", "fill: <color>;"], ]} />

Examples

Basic example

Use utilities like fill-indigo-500 and fill-lime-600 to change the fill color of an SVG:

<Figure> <Example> { <div className="flex items-center justify-center"> <svg className="h-12 fill-blue-500" viewBox="0 0 46 48"> <path fillRule="evenodd" clipRule="evenodd" d="M23.0002 0C12.5068 0 4.00017 8.50659 4.00017 19V32.5335C4.00017 32.8383 3.9145 33.1371 3.75292 33.3956L0.912672 37.94C0.0801118 39.2721 1.0378 41 2.60867 41H43.3917C44.9625 41 45.9202 39.2721 45.0877 37.94L42.2474 33.3956C42.0858 33.1371 42.0002 32.8383 42.0002 32.5335V19C42.0002 8.50659 33.4936 0 23.0002 0ZM23.0002 48C20.2388 48 18.0002 45.7614 18.0002 43H28.0002C28.0002 45.7614 25.7616 48 23.0002 48Z" /> </svg> </div> } </Example>
html
<!-- [!code classes:fill-blue-500] -->
<svg class="fill-blue-500 ...">
  <!-- ... -->
</svg>
</Figure>

This can be useful for styling icon sets like Heroicons.

Using the current color

Use the fill-current utility to set the fill color to the current text color:

<Figure hint="Hover over the button to see the fill color change"> <Example> { <div className="flex items-center justify-center"> <button className="inline-flex gap-2 rounded-md border border-indigo-100 bg-white px-3 py-2 text-sm font-semibold text-indigo-600 shadow-sm transition-colors duration-150 hover:border-indigo-600 hover:bg-indigo-600 hover:text-white dark:border-transparent"> <svg viewBox="0 0 20 20" className="size-5 fill-current"> <path d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z" fillRule="evenodd" clipRule="evenodd" /> </svg> Check for updates </button> </div> } </Example>
html
<!-- [!code classes:fill-current] -->
<button class="bg-white text-indigo-600 hover:bg-indigo-600 hover:text-white ...">
  <svg class="size-5 fill-current ...">
    <!-- ... -->
  </svg>
  Check for updates
</button>
</Figure>

Using a custom value

<UsingACustomValue element="svg" utility="fill" name="fill color" value="#243c5a" variable="fill-color" />

Responsive design

<ResponsiveDesign element="svg" property="fill" defaultClass="fill-cyan-500" featuredClass="fill-cyan-700" />

Customizing your theme

<CustomizingYourThemeColors element="svg" utility="fill" />