Tailwind To Plain CSS
Map common Tailwind utility classes to plain CSS declarations.
Tailwind utilities to plain CSS
Sometimes you need the plain-CSS equivalent of Tailwind utilities — to explain a class, port a snippet out of Tailwind, or learn what a utility does. This tool maps common Tailwind classes to their underlying CSS declarations.
Seeing the CSS behind the utilities demystifies Tailwind and helps when migrating a component to vanilla CSS. Paste a set of classes, get the corresponding declarations, and copy them — a handy learning and porting aid.
Utilities, explained
It shows the plain-CSS equivalent of utility classes, handy for porting a snippet or learning what one does. The conversion runs in your browser.
Frequently asked questions
Which Tailwind classes can it convert?
A small set of common ones: flex, grid, items-center, justify-center, text-white, font-bold, rounded-lg, bg-sky-500, p-4, p-6, gap-2, and gap-4. Other classes are listed as comments.
Why not convert every class?
Tailwind's output depends on your config, theme, and version. For a complete conversion, build the page and copy the generated CSS, or check each class in Tailwind's docs.
How do I convert responsive or hover classes?
Wrap the declarations by hand: md:p-6 becomes @media (min-width: 768px) with padding: 1.5rem, and hover:bg-sky-500 becomes a :hover rule.
Related tools
Practical utilities for front-end design and implementation work.