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.
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 →JWT Decoder
Decode JWT tokens — header, payload, claims with readable timestamps.
NEWText Diff
Paste 2 texts → highlight diffs at word/line/char level. Great for diffing AI outputs.
NEWJSON Schema Generator
Generate JSON Schema (Draft-07) from a sample — for LLM structured output and API validation.
NEWJSON Formatter
Format / minify / validate JSON. Sort keys A-Z, custom indent, Ctrl+Enter shortcut.