currentColor

Syntax

property: currentColor

Parameters

Examples

.icon {
  fill: currentColor;
}

.btn {
  color: #3b82f6;
  border: 1px solid currentColor;
}

<svg class="fill-current text-blue-500">...</svg>

Browser Support

Tailwind Equivalent

You can achieve similar results in Tailwind CSS using the following utility classes:

fill-current, stroke-current, border-current, text-current utilities

Related Functions

• accent-color— The accent-color property sets the accent color for UI controls like checkboxes, radio buttons, range sliders, and progress bars.
• outline-color— The outline-color property sets the color of an element's outline. Outlines differ from borders in that they do not affect layout.
• border-color— The border-color property sets the color of an element's borders. It is a shorthand for setting all four sides or individual sides.
• System Color Keywords— CSS system colors are predefined keywords that map to the user's operating system color palette, essential for forced-colors mode compatibility.
• Named Color Keywords— CSS defines 148 named color keywords (plus transparent and currentColor) that map to specific RGB values, from aliceblue to yellowgreen.
• transparent— The transparent keyword represents a fully transparent color (rgba(0,0,0,0)). It is valid anywhere a color value is accepted.

Frequently Asked Questions