Tailwind Class Generator Online — Free Tool

Design buttons, divs, nested layouts, flex rows, and more with a live HTML preview. Export Tailwind classes, CSS, and JSX snippets.

Element / preset

Size

Preview text

Background

Text

Font weight

Font size15px

Radius16px

Padding X20px

Padding Y12px

Shadow (CSS)

Preview

Renders the real HTML element for the preset (button).

Tailwind classes (outer)

inline-flex items-center justify-center gap-2 transition-all bg-[#005EC7] text-[#FFFFFF] font-semibold text-[15px] rounded-[16px] px-[20px] py-[12px] shadow-[0px_10px_25px_0px_rgba(0,_94,_199,_0.18)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#005EC7] focus-visible:ring-offset-2 hover:opacity-95 hover:-translate-y-0.5 active:translate-y-0 disabled:opacity-50 disabled:pointer-events-none

CSS

.component {
  background-color: #005EC7;
  color: #FFFFFF;
  border-radius: 16px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0px 10px 25px 0px rgba(0, 94, 199, 0.18);
}

JSX

<button type="button" className="inline-flex items-center justify-center gap-2 transition-all bg-[#005EC7] text-[#FFFFFF] font-semibold text-[15px] rounded-[16px] px-[20px] py-[12px] shadow-[0px_10px_25px_0px_rgba(0,_94,_199,_0.18)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#005EC7] focus-visible:ring-offset-2 hover:opacity-95 hover:-translate-y-0.5 active:translate-y-0 disabled:opacity-50 disabled:pointer-events-none">
  Primary Button
</button>

Privacy note: All processing happens entirely in your browser. No data is sent to our servers.

About this tool

Tailwind CSS uses utility classes for spacing, color, typography, and layout. This generator composes common utilities from visual controls and outputs class strings you paste into JSX or HTML.

Speeds up prototyping when you know the look you want but not every utility name by heart.

Common use cases

Rapid UI prototyping in React or HTML
Teaching Tailwind spacing and color scales
Generating snippets for documentation
Exploring design tokens without memorizing scales

How to use

Pick categories: spacing, colors, typography, flex, etc.
Adjust controls and watch the preview update.
Copy the generated class string.
Paste into your component and refine in context.

This page is available at /tools/tailwind-class-generator/.

Understanding the result

Class order rarely matters for Tailwind but conflicts resolve by stylesheet order, not HTML order.
Arbitrary values like w-[327px] appear when presets do not fit.
Preview is approximate—always verify in your real layout and breakpoints.
Purge/content config must see class strings in source for production builds.