Capítulo 28 de 29
Three utilities cover the SVG-specific presentation properties that regular CSS color/border utilities don't reach: fill, stroke, and stroke-width — each pulling from the same color palette as every other color utility in the framework.
fill: fill-none, fill-inherit, fill-current (currentColor — lets an icon inherit the surrounding text color, the most common pattern for icon fonts/inline SVGs), fill-transparent, full color palette (fill-<color>-<shade>), fill-(<custom-property>), fill-[<color>].
stroke (color): same shape as fill — stroke-none, stroke-inherit, stroke-current, stroke-transparent, full palette, stroke-(<custom-property>), stroke-[<color>].
stroke-width: stroke-<number> (unitless SVG stroke width, e.g. stroke-2), stroke-(length:<custom-property>), stroke-[<value>].
<button class="flex items-center gap-2 text-red-600 hover:text-red-700">
<svg class="size-4 fill-current" viewBox="0 0 20 20">...</svg>
Delete
</button>
<svg class="size-6 stroke-indigo-500" stroke-width="1.5" viewBox="0 0 24 24" fill="none">
<path d="..." />
</svg>
fill-current for icons that should match adjacent text color automatically (recolor by changing the parent's text-*, not the SVG), vs. an explicitly-colored outline icon using stroke-* independent of text color.fill-current/stroke-current is the standard way to make an inline icon recolor automatically with its surrounding text — prefer it over hardcoding a fixed fill-<color> on every icon usage.fill/stroke/stroke-width presentation attributes — regular text-*/border-* utilities don't touch SVG paint properties, which is why SVG needs its own color utilities.stroke-width is unitless (matching the native SVG attribute), unlike border-width's pixel-based scale.fill-*/stroke-* draw from the identical palette as bg-*/text-*/border-*.size-* is commonly paired with inline SVG icons alongside fill-*/stroke-*.