Two generators live, more on the way
Tailwind generators that give you the classes, not a screenshot.
I got tired of guessing which shade pairing looked right, then hand-typing
from-sky-500 via-indigo-500 to-fuchsia-600
into a template to find out. So I built the tools I wanted: pick it, see it, copy the exact utility
string, paste it into your component. Everything runs client-side, and it's all free.
The tools
Small, focused, and built around the way you actually write Tailwind: choose from the real palette, watch the preview, copy the class string.
Tailwind Gradient Generator
Linear, radial, and conic gradients built from the default palette. Pick a direction on the
8-way pad, add a via stop, nudge the stop percentages, and switch between v4
bg-linear-to-r and v3 bg-gradient-to-r output.
Tailwind Shadow Generator
Start from Tailwind's own shadow scale, tint it with a palette color, or stack up to six custom layers for the soft, believable depth the built-ins don't cover. Copy it as a class, plain CSS, or a theme extension.
Build a shadow →Real palette values
Every swatch is a genuine Tailwind default color, all 22 families across all 11 steps. What you see in the preview is what the compiled CSS gives you.
Version-aware output
v4 renamed a good chunk of the utility surface. Flip the toggle and the generator hands you the class names that actually exist in your version.
Absurdly fast
Server-rendered PHP, inlined critical CSS, one small deferred script, zero web fonts, zero trackers. The whole page lands in a single round trip.
What should I build next?
The shortlist right now: a container-query playground, a @theme token editor, and an
animation timing generator. If you keep re-typing the same utility soup in your own projects,
that's exactly the kind of thing that belongs here.