Tailwind CSS Fill & Stroke Cheatsheet

Complete reference for styling SVG elements with Tailwind CSS.
Click any class to copy it to your clipboard.

Quick Navigation

Fill Basics Fill Colors Stroke Basics Stroke Colors Stroke Width Combining Fill & Stroke

Fill Basics

Control the fill color of SVG elements. The fill is the interior color of shapes.

Tip: Use fill-current to make SVG icons inherit the text color of their parent element.

Fill Colors

Apply any Tailwind color to SVG fills. All color shades (50-950) are available.

All Shades Available

50

100

200

300

400

500

600

700

800

900

950

Stroke Basics

Control the stroke (outline) color of SVG elements.

Tip: Use stroke-current to make SVG strokes inherit the text color of their parent element.

Stroke Colors

Apply any Tailwind color to SVG strokes. All color shades (50-950) are available.

Stroke Width

Control the thickness of SVG strokes.

Custom Stroke Width

For custom stroke widths, use arbitrary values:

stroke-[0.5]

stroke-[3]

stroke-[4]

Combining Fill & Stroke

Combine fill and stroke utilities for complete SVG styling.

fill-blue-500stroke-blue-700

fill-nonestroke-red-500

fill-green-200stroke-green-600

fill-transparentstroke-white

Common Use Cases

Icon Button

<button class="text-gray-600 hover:text-blue-500">
  <svg class="w-6 h-6 fill-current">...</svg>
</button>

Icon inherits button text color

Outlined Icon

<svg class="w-6 h-6 fill-none
     stroke-current stroke-2">
  ...
</svg>

Stroke-only icons like Heroicons

Two-tone Icon

<svg class="w-6 h-6">
  <path class="fill-blue-200" d="..." />
  <path class="fill-blue-600" d="..." />
</svg>

Different fills per path

Status Indicator

<svg class="w-3 h-3 fill-green-500">
  <circle cx="6" cy="6" r="6" />
</svg>

Simple colored dot

Hover & State Variants

Use Tailwind state variants for interactive SVG styling.

group-hover:fill-red-500

Hover to see effect

group-hover:stroke-yellow-500

Hover to see effect

group-hover on both

Hover to see effect

Available State Variants

hover:fill-*focus:fill-*active:fill-*group-hover:fill-*hover:stroke-*focus:stroke-*group-hover:stroke-*

Inspect SVG styles on any website

Frontend Hero's Tailwind Scanner shows you all Tailwind classes including fill and stroke utilities. Extract any SVG style with 2 clicks.

Get Frontend Hero now →

Explore more Tailwind tools

Tailwind Grid Generator

Create grid layouts visually

Tailwind Flexbox Generator

Create flex layouts visually

Tailwind Gradient Generator

Create custom gradients

Tailwind Text Gradient

Gradient text effects

Tailwind Gradients Collection

275+ ready-to-use gradients

Tailwind Colors

Complete 240+ color palette

Tailwind Box Shadow Generator

Design multi-layer shadows

Tailwind Text Shadow

Add depth to text with shadows

Tailwind Filter Generator

Apply blur, brightness & more

Tailwind Transform Generator

Rotate, scale & translate elements

Tailwind Animation Generator

Create built-in & custom animations

Tailwind Transition Generator

Smooth hover transitions

Tailwind Config Generator

Generate your config file

Tailwind Input Generator

Design form inputs visually

Tailwind Class Sorter

Organize classes in order

Flexbox Cheatsheet

All flex utilities visualized

Overflow Cheatsheet

Control content overflow

Browse all free Tailwind tools →