Tailwind CSS Fill

The fill utility in Tailwind CSS sets the fill color of an SVG element.

Syntax

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

Example

<svg class="fill-current text-blue-500">
  <path d="M12 0a12 12 0 110 24 12 12 0 010-24zM5.5 10h9c.3 0 .5-.2.5-.5s-.2-.5-.5-.5h-9c-.3 0-.5.2-.5.5s.2.5.5.5zm0 3h9c.3 0 .5-.2.5-.5s-.2-.5-.5-.5h-9c-.3 0-.5.2-.5.5s.2.5.5.5zM5.5 16h9c.3 0 .5-.2.5-.5s-.2-.5-.5-.5h-9c-.3 0-.5.2-.5.5s.2.5.5.5z"/>
</svg>

Output

The above example will generate an SVG icon with the fill color set to blue.

Explanation

Tailwind CSS provides a fill-current class that applies fill: currentColor; to the SVG element. This allows you to control the fill color using the color property.

Use

Use the fill utility in Tailwind CSS to set the fill color of SVG icons or graphics.

Important Points

• The fill utility is used to set the fill color of SVG elements.
• The fill-current class is used to apply fill: currentColor; to the SVG element.
• The color property is used to control the fill color.

Summary

Use the fill utility in Tailwind CSS to set the fill color of SVG elements. The fill-current class applies fill: currentColor; to the SVG element, and the color property is used to control the fill color.