SVG Color

Below, utility classes to apply fill and stroke properties.

Fill

Class	Properties
.fill-<color>-<tint>	fill: var(--#{$color}-#{$tint});

Example(s)

<svg class="fill-gray-500 ..." stroke="currentColor"></svg>
<svg class="fill-deep-orange-500 ..." stroke="currentColor"></svg>
<svg class="fill-yellow-500 ..." stroke="currentColor"></svg>
<svg class="fill-green-500 ..." stroke="currentColor"></svg>
<svg class="fill-indigo-500 ..." stroke="currentColor"></svg>

Stroke

Class	Properties
.stroke-<color>-<tint>	stroke: var(--#{$color}-#{$tint});

Example(s)

<svg class="stroke-gray-500 ..." fill="currentColor"></svg>
<svg class="stroke-deep-orange-500 ..." fill="currentColor"></svg>
<svg class="stroke-yellow-500 ..." fill="currentColor"></svg>
<svg class="stroke-green-500 ..." fill="currentColor"></svg>
<svg class="stroke-indigo-500 ..." fill="currentColor"></svg>

Pseudo Classes

fill and stroke are supported by changing state on-the-fly! You can use it like this:

<svg class="fill-indigo-500 hover:fill-indigo-600 focus:fill-indigo-700 disabled:fill-indigo-300">...</svg>
<svg class="stroke-indigo-500 hover:stroke-indigo-600 focus:stroke-indigo-700 disabled:stroke-indigo-300">...</svg>