Tailwind to CSS Converter
Paste a list of Tailwind classes and see the plain CSS behind them. Variants like hover:, md: and dark: become their own rules.
Tailwind classes
.element {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
background-color: #ffffff;
border-width: 1px;
border-color: #e5e7eb;
border-radius: 0.75rem;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 600;
color: #007595;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.element:hover {
background-color: #f9fafb;
}
@media (min-width: 768px) {
.element {
padding: 2rem;
}
}| Class | CSS |
|---|---|
| flex | display: flex; |
| items-center | align-items: center; |
| gap-4 | gap: 1rem; |
| p-6 | padding: 1.5rem; |
| bg-white | background-color: #ffffff; |
| border | border-width: 1px; |
| border-gray-200 | border-color: #e5e7eb; |
| rounded-xl | border-radius: 0.75rem; |
| text-sm | font-size: 0.875rem; line-height: 1.25rem; |
| font-semibold | font-weight: 600; |
| text-cyan-700 | color: #007595; |
| shadow-md | box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); |
| hover:bg-gray-50 | background-color: #f9fafb; |
| md:p-8 | padding: 2rem; |
Frequently asked questions
How do I see what CSS a Tailwind class generates?
Paste the class here. For example p-4 gives padding: 1rem and rounded-lg gives border-radius: 0.5rem. Colors resolve to their hex values from the default Tailwind v4 palette.
How are hover and responsive variants handled?
Each variant gets its own rule. hover:bg-gray-50 becomes a :hover selector, and md:p-8 is wrapped in a min-width media query using Tailwind's default breakpoints.
Why does a class show as not recognized?
It may be a custom class from your own CSS, a plugin utility, or one of the many Tailwind utilities this tool does not cover yet. Common layout, spacing, color, typography, border and shadow utilities are supported.
Does the CSS match what Tailwind outputs exactly?
It matches the values, not the exact generated code. Tailwind v4 emits custom properties and layers for some utilities, while this tool gives you the resolved plain CSS, which is easier to read and reuse.
Guides that go with this tool
More free Tailwind CSS tools
More free tools & components
Keep going with another tool, or grab a ready-made component.