Tailwind Class Generator
FreeGenerate Tailwind CSS utility classes from CSS properties
12 buttons designs — see each one live, then copy its Tailwind classes.
px-4 py-2 rounded-lg bg-indigo-600 text-white font-semibold hover:bg-indigo-500 transition-colorspx-5 py-2.5 rounded-xl bg-gradient-to-r from-fuchsia-600 to-indigo-600 text-white font-bold shadow-lg shadow-indigo-600/30 hover:opacity-90 transitionpx-4 py-2 rounded-lg border border-indigo-500 text-indigo-600 font-semibold hover:bg-indigo-50 transition-colorspx-4 py-2 rounded-lg text-indigo-600 font-semibold hover:bg-indigo-100 transition-colorspx-4 py-2 rounded-lg bg-indigo-100 text-indigo-700 font-semibold hover:bg-indigo-200 transition-colorspx-5 py-2 rounded-full bg-red-500 text-white text-sm font-semibold hover:bg-red-600 transition-colorspx-4 py-2 rounded-lg bg-green-600 text-white font-semibold hover:bg-green-500 transition-colorspx-4 py-2 rounded-lg bg-gray-900 text-white font-semibold hover:bg-gray-800 transition-colorspx-8 py-3.5 rounded-2xl bg-indigo-600 text-white text-lg font-bold shadow-xl shadow-indigo-600/30 hover:-translate-y-0.5 transition-allpx-3 py-1.5 rounded-md bg-indigo-600 text-white text-xs font-semibold hover:bg-indigo-500 transition-colorspx-4 py-2 rounded-lg bg-white text-gray-800 font-semibold border border-gray-200 shadow-sm hover:bg-gray-50 focus:ring-2 focus:ring-indigo-300 transitionpx-5 py-2.5 rounded-xl bg-cyan-500 text-white font-bold shadow-[0_0_25px_-2px_rgba(6,182,212,0.7)] hover:bg-cyan-400 transitionAbout Tailwind Class Generator
When you know the CSS you want but need the matching Tailwind utilities, mentally mapping properties to class names slows you down, especially for spacing, colors, and arbitrary values. This generator converts CSS properties into Tailwind utility classes so you can translate a style block into the framework's syntax quickly.
Provide the CSS you're working with and the tool suggests the corresponding Tailwind classes to apply on your markup. It's useful when migrating plain CSS to Tailwind or when you remember the property but not the utility name. The tool is free, runs in your browser without an account, and helps you stay in Tailwind's class-based workflow without constant doc lookups.
Common uses
- Translate an existing CSS rule into equivalent Tailwind utility classes
- Migrate hand-written styles to a Tailwind-based component
- Look up the Tailwind class for a property you know but can't recall the name of
- Speed up converting design specs into Tailwind markup
How to use
- 1
Configure options
Set your preferences using the options panel below.
- 2
Click Generate
Click the process button to generate your result instantly.
- 3
Copy or download
Copy the result to clipboard or download it directly to your device.
Why ToolHub?
- Instant generation
- Copy-ready output
- No login required
FAQ
What do I give it and what do I get?
You provide CSS properties and it returns the matching Tailwind utility classes to apply on your elements.
Does it handle custom or arbitrary values?
Tailwind supports arbitrary value syntax for properties without a preset utility, and the generated classes reflect the CSS you provide.
Which Tailwind version does it target?
It maps standard Tailwind utility classes. Confirm the suggestions against the Tailwind version configured in your project.
Can I use Tailwind Class Generator on mobile?
Yes — ToolHub is fully responsive and works on iPhone, Android, tablets and all modern browsers. No app install needed.