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