Build Tailwind CSS class strings without memorising the docs. Pick layout, spacing, colours and typography options below, then copy the resulting classes straight into your project — free and private.
Paste these classes onto any element in a project with Tailwind CSS set up. A visual preview needs Tailwind loaded in your own project.
How to Use
- Choose options from each dropdown — display, spacing, colours and typography.
- The class string builds automatically as you pick.
- Press Copy classes and paste them onto any element in your project.
- Use Reset to clear every dropdown and start over.
Key Features
- Ten style groups — layout, spacing, colour and type covered.
- Live class string — updates with every selection.
- One-click copy — with a fallback for older browsers.
- Real class names — exactly as documented for Tailwind CSS.
- 100% private — everything runs in your browser; nothing is sent or stored.
FAQs
Do I need Tailwind installed to use the classes?
Yes — the classes only take effect in a project with Tailwind CSS set up. This tool builds the class string; your project applies the styles.
Why is there no live preview?
Tailwind generates its styles at build time, so a preview here would not match your project exactly. Paste the classes into your own project to see them styled.
Can I combine these with my own classes?
Yes. The output is plain text — append or merge it with any other classes you already use.
Is my data sent anywhere?
No. Everything runs in your browser and never transmits or saves your selections.
Related Tools
CSS Button Generator · CSS Gradient Generator · CSS Flexbox Generator · CSS Border Radius Generator