Tailwind CSS Class Generator
Build Tailwind CSS class strings visually. Pick colors, typography, spacing, borders, and effects with a live preview. Copy the class string or JSX snippet instantly — no Tailwind docs needed.
bg-indigo-500
text-white
bg-indigo-500 text-white text-base p-4 rounded-lg shadow-md
<div className="bg-indigo-500 text-white text-base p-4 rounded-lg shadow-md">
Features
17 color palettes
All Tailwind colors — slate to rose — with 10 shades each for bg, text, and border
Typography tab
Font size, weight, line height, and tracking from Tailwind's built-in scale
Spacing tab
Padding, margin, width, and height from the full Tailwind spacing scale
Borders tab
Border radius, border width, and border style utilities
Effects tab
Opacity, shadow scale, and ring utilities for focus states
Live preview
A colored element updates as you change classes so you see the result immediately
How to use
- 1
Colors tab
Pick a background color, text color, and border color from all Tailwind palettes.
- 2
Typography tab
Set font size, weight, line height, and letter spacing from the Tailwind scale.
- 3
Spacing tab
Adjust padding, margin, width, and height values.
- 4
Borders & Effects tabs
Set border radius, border width, opacity, shadow, and ring utilities.
- 5
Copy output
Click "Copy classes" for the raw class string or "Copy JSX" for the className attribute.
Frequently asked questions
Can I use the output in any framework?
Yes. The generated class string works in any framework that supports Tailwind CSS: React, Next.js, Vue, Svelte, Astro, plain HTML, and more. The JSX copy button formats it as className="..." for React/JSX.
Why does the preview use inline styles instead of Tailwind classes?
Tailwind's JIT scanner detects classes at build time by scanning your source files. Dynamically constructed class strings like "bg-" + color + "-" + shade are not detected. The preview uses inline CSS values (mapped from Tailwind constants) while the output is the correct Tailwind class string.
Does it support Tailwind v4 CSS-first config?
The class names are identical in both v3 and v4. If you're using Tailwind v4, paste the generated classes into your component as usual — the utility names haven't changed.
Can I generate responsive or dark mode variants?
This tool generates the base utility classes. To add responsive variants like "md:text-lg" or dark mode variants like "dark:bg-zinc-800", append the prefix to the class string after copying.