html69// dev utilities

CSS tool

Tailwind to CSS Converter

Do you want CSS to Tailwind Converter?

Paste a class list, HTML, JSX, or @apply. Compile Tailwind v4 utilities to CSS in the browser, with arbitrary values and optional custom theme tokens. Nothing is uploaded.

Like the tool? Find a bug?Share with us

Converter

Compile Tailwind v4 class lists, HTML, JSX, or @apply rules to CSS in this tab. Files stay on this device.

Supported files: .html, .htm, .txt, .jsx, .tsx, .css
0 / 50,000
Compiled CSS will appear here.

Optional tokens compiled with the classes — --color-brand unlocks bg-brand.

Guide

How this Tailwind to CSS converter works

01

Utilities become CSS

Tailwind is a compiler. This tool reads class names from a list, markup, or @apply and emits the CSS those utilities would generate.

02

Runs in your tab

Sample, HTML, Arbitrary, and Theme are starting points. Tailwind v4 compiles locally — including variants such as hover: and md:.

03

Theme tokens and preflight

Add @theme tokens so bg-brand resolves. Switch Preflight when you want the CSS reset in the same stylesheet. Copy expanded or compressed CSS.

Use it

What compiles well

Default v4 utilities, arbitrary values like bg-[#0ea5e9], variants, and @apply in a small rule. Custom @theme variables map onto the usual color, spacing, and radius namespaces. Unknown tokens stay listed under the output. The 50,000 character cap counts the input and the theme together.

FAQ

Questions

Which Tailwind version is this?

Tailwind CSS v4, the same compiler this site is built with. v3 class names that still exist in v4 compile. Names that were removed stay listed as not converted.

Can I paste HTML or JSX?

Yes. The converter reads class, className, Vue :class, helpers such as cn(), and @apply blocks. A bare class string works too.

What is custom @theme for?

Design tokens. --color-brand: #0ea5e9 unlocks bg-brand, text-brand, and the rest of the color utilities. Spacing and radius tokens follow the same pattern.

Is my Tailwind uploaded anywhere?

No. Compilation happens in your browser tab. There is no account and no API call.