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 CSS Live Editor
Paste HTML with Tailwind classes and watch it render as you type, compiled by the real v4 engine in a sandboxed frame. Test breakpoints at 375, 768 and 1280 px, flip dark mode, and share a snippet as a plain link.
Open the playground →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 live editor just shipped. 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.