CSS Utility Classes for Your Project

Generate Tailwind CSS classes from visual settings - spacing, colors, typography.

Configurazione

Breakpoint

Display

Flexbox

Direction
Justify
Align items

Spacing

Tipografia

Size
Weight
Align

Colori

Border

Width
Radius

Effetti

Shadow
Opacity
Position
Overflow

Anteprima

Anteprima elemento

L'anteprima visiva richiede Tailwind CDN. Le classi generate sono comunque corrette.

Classi Generate

p-4

Incolla nel tuo HTML: class="p-4"

Come utilizzare Tailwind CSS Generator

Set Breakpoint and Display

Choose a responsive prefix (base, sm, md, lg, xl) and the type of display to apply to the element.

Configure spacing, typography and colors

Choose text padding, margin, size and weight, text colors and background colors by selecting a color and tone from the Tailwind palette.

Add borders and effects

Set width and border radius, shadow, opacity, positioning and overflow: each choice updates the string of classes in real-time.

Copies generated classes

Click "Copy Classes" to copy the full string and paste it into your HTML attribute or component.

Suggerimenti

  • Build your layout first (display, flex, spacing) and only then refine colors and effects: it's easier to read the order of generated classes.
  • Use active chip references as visual reference: The highlighted class corresponds exactly to the one inserted in the final string.
  • If your project uses a custom theme with renamed colors, manually replace the color names generated by Tailwind with those from your tailwind.config.

Domande frequenti

Does the tool generate only CSS code or just Tailwind classes?

Generate exclusively utility strings of classes like Tailwind CSS (e.g., flex justify-center p-4), not custom CSS. Use these classes in a project that already has Tailwind configured.

Why isn't the visual preview showing the real style?

Preview on the page does not load CDN Tailwind for performance and CSP reasons, so it shows a generic box. The generated classes in the text are still correct and working in your project.

Can I combine multiple breakpoints on the same class?

The tool applies a responsive prefix to each generated class. For multi-breakpoint combinations (e.g., flex on mobile and grid on desktop), it generates two separate sets and you need to merge them manually in your HTML.

Which version of Tailwind CSS covers the generator?

Utility settings (spacing, colors, flex, grid, shadow, border) follow the standard naming convention of Tailwind CSS v3/v4. If your project uses a custom configuration with renamed classes, check for correspondence in your tailwind.config.

How do I reset settings?

Use the "Reset" button at the top of the configuration panel: restore all options to their default values without reloading the page.

All Tools