Tailwind to CSS
Convert Tailwind utility classes to vanilla CSS and vice versa (613+ mappings).
Free & unlimited
Examples
Tailwind classes(11 classes)
CSS output
/* flex */
display: flex;
/* flex-col */
flex-direction: column;
/* p-6 */
padding: 1.5rem;
/* bg-white */
background-color: #ffffff;
/* rounded-lg */
border-radius: 0.5rem;
/* shadow-md */
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
/* border */
border-width: 1px;
/* border-gray-200 */
border-color: #e5e7eb;
/* gap-4 */
gap: 1rem;
/* max-w-lg */
max-width: 32rem;
/* mx-auto */
margin-left: auto; margin-right: auto;
All processing happens in your browser. No data is sent to any server.
About this tool
- 1
Choose direction
Toggle between "Tailwind → CSS" and "CSS → Tailwind" modes.
- 2
Paste input
Paste Tailwind classes or CSS properties in the input panel.
- 3
View output
The converted output appears instantly in the right panel.
- 4
Copy
Click copy to grab the output.
- Supports 300+ common Tailwind classes including spacing, colors, layout, typography, and borders.
- State variants (hover:, focus:) and responsive prefixes (sm:, md:) are noted as comments.
- Unknown classes are highlighted in yellow so you know what could not be converted.
- Tailwind → CSS conversion
- CSS → Tailwind conversion
- 300+ class mappings
- Responsive prefix handling
- State variant notes
- Copy output
- Understanding what CSS a Tailwind class generates
- Converting a CSS codebase to Tailwind utility classes
- Learning Tailwind by seeing the CSS equivalents