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.

Tailwind to CSS Converter

Runs in browser

Convert Tailwind utility classes to plain CSS instantly.

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;

🔒 Runs in your browser · No uploads · Your data never leaves your device

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.

Common use cases

Understanding what a Tailwind class generates — Look up what CSS a utility like shadow-md or ring-2 actually outputs to debug or document styles.
Migrating from Tailwind to plain CSS — Convert a component's Tailwind classes to CSS declarations when moving away from utility-first styling.

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.

Key concepts

Tailwind CSS: A utility-first CSS framework where styles are applied using single-purpose class names like text-lg, flex, and p-4 directly in HTML.
CSS declaration: A property-value pair like display: flex or padding: 1rem that applies a single style rule to an element.

You might find these useful too.