Tailwind Button Generator — Free Online Tool

Design a button visually and copy production-ready Tailwind CSS classes — solid, outline, ghost, soft, link, and gradient variants, full hover/focus/disabled/loading states, dark mode, and v3/v4 support. No signup, runs entirely in your browser.

BODY:

What it does

This tool lets you build a button by clicking through visual controls — variant, color, size, corners, border, shadow, typography, icon slots, focus ring, and transition — and get back the exact Tailwind utility classes for it, ready to paste into HTML, JSX, or Vue. There’s also a plain resolved-CSS export for anyone not using Tailwind yet. Every state (hover, active, disabled, loading) is previewable without needing to actually hover or click, and dark-mode variants are generated alongside the light ones.

How it works

Each control maps to Tailwind’s default theme scale — colors use the full 22-color, 11-shade default palette; radius and shadow use the standard scale tokens; sizes use matching padding/font-size pairs modeled on common design-system conventions (Stripe, Material, shadcn-style spacing). Hover and active shades are computed automatically by stepping one or two rungs down the color’s shade scale, so a bg-indigo-600 button gets a sensible hover:bg-indigo-700 without you picking it by hand.

A Tailwind v3/v4 toggle handles the utility renames between versions — rounded/rounded-sm, shadow/shadow-sm, and the default ring width all shifted between v3 and v4, and this tool emits the correct class name for whichever version you’re targeting rather than a class that only works in one.

How to use it

1. Pick a variant (solid, outline, ghost, soft, link, or gradient) and a base color and shade.
2. Adjust size, corner radius, border, and shadow to match your design.
3. Turn on dark-mode classes if your project uses Tailwind’s dark: variant, and preview the button against a dark stage.
4. Use the state buttons above the preview to see exactly how hover, active, disabled, and loading will look — no real mouse interaction needed.
5. Copy the HTML, JSX, Vue, or plain CSS output from the tabs below the preview.

If you’re assembling a full form around the button, the border-radius playground and box shadow generator use the same default scale, so values copy across cleanly.

FAQ

Does this use real Tailwind, or an approximation? The classes are built from Tailwind’s actual default theme values (verified against the official v3 and v4 scales), so what you copy is exactly what Tailwind would generate — no guessing involved.

Can I get plain CSS instead of Tailwind classes? Yes — the CSS tab in the export panel gives you the resolved, literal CSS for the button as configured, if you’re not using Tailwind or want a fallback.

Why does the hover color change automatically? Solid buttons hover to one shade darker and active to two shades darker by default, matching the most common Tailwind button pattern. You can still override the base color/shade to get whatever hover state you want.

Does it support custom brand colors outside the default palette? Not directly in the swatch picker — this tool sticks to Tailwind’s default theme so the classes work out of the box with an unmodified tailwind.config. For a custom palette, generate the button here and swap the color name in the copied classes.

What’s the difference between the v3 and v4 toggle? A handful of utilities were renamed in Tailwind v4 (shadow and rounded scales shifted down a step, the default ring width changed from 3px to 1px, outline-none became outline-hidden). The toggle makes sure the copied classes match whichever version your project runs.