Is this the full Tailwind engine?

No. This tool maps common utilities to CSS for learning and debugging. Arbitrary values and plugins are not fully expanded.

Is my input sent to a server?

No. Everything runs locally in your browser.

New

Tailwind to CSS Converter

Runs in browser

Convert Tailwind CSS class strings to plain CSS. Understand what utilities expand to, including colors, spacing, and shadows — with notes for hover and responsive prefixes.

Tailwind classes

display: flex;

flex-direction: column;

gap: 1rem;

padding: 1.5rem;

background-color: #1e293b;

border-radius: 0.75rem;

border-width: 1px;
border-style: solid;

border-color: #334155;

box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

font-size: 0.875rem;

font-weight: 500;

color: #f1f5f9;

max-width: 24rem;

width: 100%;

cursor: pointer;

transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;

/* :hover */
background-color: #334155;

Chain to another tool

Send this output to another tool instantly — no copy-paste needed.

Produce output above to enable chaining.

How to use

Paste classes
Paste a space-separated list of utilities on one or more lines.
Read output
Use the CSS rules tab for plain declarations, or the @apply tab for a single-rule @apply snippet.
Copy
Copy either CSS or the @apply block into your stylesheet or documentation.

Examples

Layout utilities
Flex, gap, padding.
Input
```
flex gap-4 p-6
```
Output
```
display: flex; …
```

Frequently asked questions

Is this the full Tailwind engine?: No. This tool maps common utilities to CSS for learning and debugging. Arbitrary values and plugins are not fully expanded.
Is my input sent to a server?: No. Everything runs locally in your browser.

You might find these useful too.