Tailwind button generator

← All tools

Build accessible button markup with Tailwind utility classes. Preview hover, focus, and disabled states without loading Tailwind at runtime.

Presets

Size
Variant
Width
Icon position
Rounded (output)
Shadow (output)

Preview

HTML

Classes only
Size, variant, width, icon, rounded, shadow, and disabled are saved in the URL. Label is not.
About this tool
Generates a single accessible button with Tailwind utilities for size, variant, width, icon placement, and optional rounded/shadow classes. Focus styles use focus-visible outlines; disabled state includes cursor and opacity utilities.
The live preview is styled with this tool's CSS so it works without a Tailwind build step. Copy the HTML into a project that already has Tailwind configured.
Read more
Free books, courses, and software
Get my programming books, course editions, and complete software.
Get the download library →