Tailwind CSS Generator

Free visual Tailwind CSS generator. Tune colors, radius, shadow and layout with live preview, then copy standard Tailwind class names — runs in your browser.

Sample Card

Sample text with the current settings

Primary Button

The preview area above shows live results

Color

Background Color

Card Color

Card Opacity100%

Radius & Shadow

Radius12px

Shadow

Layout

Max Width

Center Horizontallymx-auto

Flex Layoutflex

Tailwind HTML

<div class="p-6 max-w-md mx-auto" style="background:#f1f5f9">
  <div class="bg-white rounded-xl shadow-md p-4">
    <h3 class="font-bold">Title</h3>
    <p class="text-gray-600 mt-2">Description text</p>
    <button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg">Button</button>
  </div>
</div>

💡 Generated classes are standard Tailwind CSS syntax, ready to paste into your project

💡 Card opacity maps to the bg-white/{opacity} syntax, great for glass overlays

FAQ

Can I use the generated classes directly?

Yes — output is standard Tailwind syntax (rounded-xl, shadow-md, max-w-md...). Paste into any Tailwind project and it works.

How is opacity expressed?

Card opacity maps to Tailwind syntax like bg-white/75, ideal for glassmorphism overlays.

Is it free?

Yes — no signup, no cost, fully local.