🎏

Tailwind ↔ CSS Converter

Convert between Tailwind utility classes and vanilla CSS — both directions. Supports ~200 utilities (spacing, color, flex, grid, typography). Useful for migration or learning Tailwind.

All tools Browser-only

Tailwind classes

CSS

Convert between Tailwind utility classes and vanilla CSS. Supports ~200 common utilities (spacing, color, flex, grid, typography). Useful for migration or learning Tailwind.

When to use it

Learning Tailwind: paste familiar CSS → see the matching Tailwind class. Fastest way to learn utility names.
Migration: legacy CSS-in-JS / Sass codebase → Tailwind. Convert one component at a time.
Code review: a colleague paste CSS → check if a shorter Tailwind class exists.
Documentation: write blogs/docs about styling — show both flavors.
Email templates: emails can't use Tailwind classes → convert to inline CSS.

Supported utilities

Layout: display (block/flex/grid/hidden), position, flex-direction, items-*, justify-*.
Spacing: p-*, m-*, gap-* (scale 0-96).
Sizing: w-*, h-* (full, screen, auto, scale).
Typography: text-{size}, text-{color}, font-{weight}, text-align.
Colors: bg-*, text-*, border-* (gray, red, blue, green, yellow, amber, orange, purple, pink — 50/100/.../900 palette).
Borders: border, border-{n}, rounded, rounded-{xs/sm/md/lg/xl/2xl/3xl/full}.
Effects: shadow, opacity-{n}.
Misc: cursor, overflow, z-index.

Limitations

Responsive prefixes (sm:, md:) aren't handled — apply manually.
Dark mode (dark:) likewise.
Custom config (custom color palettes) isn't recognised — only the default Tailwind palette.
Arbitrary values [24px] need manual conversion.

Who this is for

Fullstack/backend/devops engineers — debug JWT, format JSON/SQL, parse cURL, compute CIDR subnets, draft Mermaid diagrams, write conventional commits… Daily toolkit alongside your terminal and editor.

FAQ

Is my pasted code/token sent anywhere?

No. All TopDev dev tools run 100% client-side — JWT, SQL, JSON, cURL, regex… process in-browser. Disconnect to verify. Safe for internal tokens, production DB queries, API keys.

Does it work offline / install as a PWA?

Tools work offline after the first load. Installable PWA is on the roadmap — for now you can bookmark and use without internet.

Related tools

See all tools →

NEW

🔐

JWT Decoder

Decode JWT tokens — header, payload, claims with readable timestamps.

NEW

🆚

Text Diff

Paste 2 texts → highlight diffs at word/line/char level. Great for diffing AI outputs.

NEW

🧩

JSON Schema Generator

Generate JSON Schema (Draft-07) from a sample — for LLM structured output and API validation.

NEW

🎨

JSON Formatter

Format / minify / validate JSON. Sort keys A-Z, custom indent, Ctrl+Enter shortcut.