Tailwind Class Generator

Visually build Tailwind CSS utility classes with real-time responsive preview, custom text styling, presets, and copyable snippets.

Quick Layout Presets

Active Breakpoint prefix

Configuring default styles applied to all viewports.

Display

Flex Direction

Flex Wrap

Justify Content

Align Items

Gap spacing

Live Preview

Element Type

Custom Preview Text

Preview Dark Mode

Generated Code Snippet

flex items-center justify-center px-5 py-2.5 bg-blue-600 text-white text-sm font-semibold rounded-lg shadow-md

Class Inspector by Category

📦 Layout & Flex/Grid

flexjustify-centeritems-center

📐 Spacing & Size

px-5py-2.5

🔤 Typography

text-smfont-semiboldtext-white

🎨 Bg, Border & Shadow

bg-blue-600rounded-lgshadow-md