Tailwind CSS Generator

Build Tailwind utility classes visually — pick properties, see a live preview, and copy the class string.

Live Preview

0 classes active

Preview element

Preview text

Tag

Presets

Layout

Display

Flex Direction

Justify Content

Align Items

Flex Wrap

Gap

Sizing

Width

Height

Max Width

Spacing

Padding (all)

Padding X

Padding Y

Margin (all)

Margin X

Margin Y

Typography

Font Size

Font Weight

Text Color

Text Align

Line Height

Letter Spacing

Background

Background Color

Border

Border Width

Border Radius

Border Color

Effects & Transitions

Box Shadow

Opacity

Transition

Cursor

Custom Classes

Additional Tailwind classes (space-separated)

Add responsive, hover, focus, or any classes not covered by the dropdowns above.

Class String

(no classes selected)

HTML Output

<div>
  Preview element
</div>

About Tailwind CSS

Tailwind CSS is a utility-first CSS framework that lets you style elements by composing small, single-purpose classes directly in your HTML.

Instead of writing custom CSS like padding: 1rem; background-color: blue; you write p-4 bg-blue-500 directly on the element.

This tool helps you explore Tailwind's utility classes visually. Pick properties from the dropdowns, see the live preview update, and copy the generated class string into your project.

Tips for Using This Generator

Start with a preset — pick a component preset (Button, Card, Badge) and tweak from there.

Use the Custom Classes field for responsive prefixes (sm:, md:, lg:), state variants (hover:, focus:, active:), and dark mode (dark:).

Padding vs. Padding X/Y — if you set both p-* and px-*/py-*, the axis-specific values will override the all-sides value in the browser. Choose one or the other.