How to use

Four quick steps — paste, run, review, copy. Everything stays in your browser.

Paste your input

Drop CSS, HTML, JSON, or other text into the editor. Nothing is uploaded.

Run the tool

Click Convert or Run. The result appears instantly on this page.

Check the output

Read the generated code and any review notes before you ship it.

Copy and use

Copy the output to your clipboard and paste it into your project.

About this tool

Paste a string of Tailwind utility classes and expand common ones into a CSS rule block. Variants (hover:, md:) are called out in notes because they need a selector or media query wrapper.

Example

Sample input uses common layout/spacing utilities you can edit before running.

Input

flex items-center gap-4 p-6 rounded-lg bg-white shadow-lg text-gray-900 font-semibold

Output

.element {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: 0.5rem;
  /* …mapped declarations… */
}

Tip

Best for learning the CSS behind utilities or for teams that still maintain a CSS layer next to Tailwind.