Generators, converters and cleanup tools for Tailwind CSS — v3 and v4 aware, with live previews. Everything runs locally in your browser.
- Tailwind Color Palette Generator
Turn one brand color into a complete Tailwind-style 50–950 shade palette, generated perceptually in OKLCH — exported as v3 config, v4 @theme, CSS variables or JSON.
- Tailwind v3 to v4 Converter
Migrate Tailwind v3 code toward v4: rename utilities per the official upgrade guide (shadow-sm→shadow-xs, ring→ring-3, outline-none→outline-hidden…) and convert theme config objects into v4 @theme CSS.
- Tailwind Theme Generator (v3 config + v4 @theme)
Build a complete Tailwind theme starter — primary and secondary color scales, font stack and radius scale — exported as a v4 @theme block or a v3 tailwind.
- Tailwind Class Validator
Check a class list or markup for typos: every class is tested against Tailwind's core utility grammar, with unknown classes, bad variants and arbitrary values reported separately.
- Tailwind Class Cleaner
Clean a Tailwind class list: exact duplicates removed and conflicting utilities (two paddings, two display modes, two text colors) resolved last-wins — with a report of everything removed.
- Tailwind Animation Generator
Build custom Tailwind animations — fade, slide, zoom, wiggle, float, shake — with duration and easing controls, a live replayable preview, and v3 config, v4 @theme or plain CSS output.
- Tailwind Gradient Generator
Build Tailwind gradients visually — direction, two or three color stops — and copy the classes in v4 (bg-linear-to-*) or v3 (bg-gradient-to-*) form, or as plain CSS.
- Tailwind Opacity Generator
Combine any color with any opacity using Tailwind's slash modifier (bg-blue-500/50) — previewed over a checkerboard, with the plain-CSS equivalent and the deprecated legacy pattern explained.
- Tailwind Spacing Generator
Generate a custom Tailwind spacing scale from your own base unit — visualized as proportional bars, exported as v3 config, the v4 –spacing variable, or CSS custom properties.
- Tailwind Border Radius Generator
Set each corner's radius with sliders and get the matching Tailwind classes — core rounded-* names when values sit on the scale, arbitrary values when they don't — plus plain CSS.
- Tailwind Box Shadow Generator
Design a custom shadow with offset, blur, spread, color and opacity sliders — exported as a Tailwind arbitrary class, a named v4 @theme or v3 config token, or plain CSS.
- Tailwind Typography Generator
Generate a modular Tailwind font-size scale — base size × musical ratio, with line heights paired automatically — as v4 @theme, v3 fontSize config or CSS variables.
- Tailwind Grid Generator
Build a Tailwind CSS grid visually — columns, rows, gap and a mobile-first responsive pattern (grid-cols-1 sm:grid-cols-2 lg:grid-cols-N) — with the markup ready to copy.
- Tailwind Flexbox Generator
Compose Tailwind flexbox layouts visually — direction, justify, align, wrap and gap — watching items rearrange live, then copy the classes or the CSS equivalent.
- Tailwind Breakpoint Generator
Define custom Tailwind breakpoints as name:pixel pairs — visualized to scale, exported as v4 –breakpoint-* variables, a v3 screens config, or raw media queries.
- Tailwind Button Generator
Generate accessible Tailwind buttons — solid, outline or ghost, in three sizes — with hover shades derived from your brand color and a visible focus ring included by default.
- Tailwind Card Generator
Compose a Tailwind card — padding, radius, shadow, border, hover lift and optional dark: variants — previewed live with real content structure, ready to paste.
- Tailwind Form Generator
Generate accessible Tailwind form markup — labeled inputs, select, textarea, consent checkbox, focus rings and an aria-wired error-state pattern — the boilerplate done right once.
- CSS to Tailwind Converter
Translate CSS declarations into Tailwind utilities — scale values map to core classes, off-scale values become arbitrary values, near-miss colors map to the closest palette color.
- Tailwind to CSS Converter
See exactly what CSS a Tailwind class list generates — core utilities translated to their v3.
- HEX to Tailwind Color
Find the Tailwind palette color closest to any hex value — top five matches ranked by perceptual OKLab distance, with side-by-side swatches and an honest "keep your exact color" fallback.
- Tailwind Class Sorter
Sort Tailwind classes into the conventional order — layout → flex/grid → spacing → sizing → typography → visual → effects, base classes before variants — approximating the official Prettier plugin.
Built for the v3 → v4 era
Tailwind CSS v4 changed how themes are configured — CSS-first @theme blocks instead of tailwind.config.js, OKLCH colors, renamed utilities. Every tool in this collection is version-aware: generators export BOTH v3 config and v4 @theme formats, the validator recognizes both naming generations, and a dedicated converter applies the official upgrade guide’s rename table.
What lives here
Three families: generators (palettes, themes, animations) that produce config and classes from visual controls; converters that translate between CSS, Tailwind versions and formats; and cleanup tools (validator, cleaner) that fix real-world class-list problems like typos, duplicates and conflicting utilities.
All processing is local — your classes and configs never leave the browser. Color-related tools share the same OKLCH engine as the Design Token Tools, so palettes stay consistent across both.
