Generators, converters and cleanup tools for Tailwind CSS — v3 and v4 aware, with live previews. Everything runs locally in your browser.
Your favourites
Recently used
Start from what you are trying to do
- Build a Tailwind theme from one colourA Tailwind colour scale and theme config generated from a single brand colour.3 steps, starting with HEX to Tailwind Color
- Move a project to Tailwind v4Converted markup and a config that matches how v4 expects to be written.4 steps, starting with Tailwind v3 to v4 Converter
- Convert hand-written CSS to TailwindTailwind utility classes equivalent to your CSS, checked and ordered.3 steps, starting with CSS to Tailwind Converter
- Tailwind Color Palette GeneratorTurn 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 ConverterMigrate 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.config.js.
- Tailwind Class ValidatorCheck 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 CleanerClean 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 GeneratorBuild 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 GeneratorBuild 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 GeneratorCombine 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 GeneratorGenerate 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 GeneratorSet 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 GeneratorDesign 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 GeneratorGenerate 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 GeneratorBuild 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 GeneratorCompose Tailwind flexbox layouts visually — direction, justify, align, wrap and gap — watching items rearrange live, then copy the classes or the CSS equivalent.
- Tailwind Breakpoint GeneratorDefine 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 GeneratorGenerate 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 GeneratorCompose a Tailwind card — padding, radius, shadow, border, hover lift and optional dark: variants — previewed live with real content structure, ready to paste.
- Tailwind Form GeneratorGenerate 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 ConverterTranslate 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 ConverterSee exactly what CSS a Tailwind class list generates — core utilities translated to their v3.4 default declarations, variants annotated with their media query or state, unknowns listed honestly.
- HEX to Tailwind ColorFind 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 SorterSort Tailwind classes into the conventional order — layout → flex/grid → spacing → sizing → typography → visual → effects, base classes before variants — approximating the official Prettier plugin.
Frequently asked questions
Do these use the real Tailwind values?
Yes. The palettes and scales are extracted from the official Tailwind packages rather than sampled from a screenshot or retyped, so a generated colour matches what the framework actually emits rather than being close to it.
Do Tailwind v3 and v4 differ?
Genuinely, yes. v4 rebuilt the default palette in OKLCH with higher chroma, so v3 and v4 versions of the same colour name are different colours rather than the same one written differently. The tools keep both and label which is which.
What is the difference between a theme and a config?
In v3 you extend the theme inside tailwind.config.js. In v4 the theme is declared in CSS with an @theme block and there is usually no config file at all. The generators emit whichever form you pick, because the two are not interchangeable.
Why is my utility class being ignored?
Usually a conflict: two classes from the same group, such as two paddings on one side, where the later one in the generated stylesheet wins regardless of the order you wrote them. The class validator reports conflicts as well as unknown classes.
Can I convert existing CSS to Tailwind?
Property by property, yes, and the converter is explicit that this is what it does. It cannot infer components or variants from a stylesheet, so it maps declarations to the nearest utilities and leaves anything without an equivalent as plain CSS.
How do I match a brand colour to Tailwind?
Use the nearest-colour tool, which compares in a perceptual space rather than by hex distance. Hex distance regularly picks a shade that measurably differs from the one that actually looks closest.
Do these replace Tailwind itself?
No. They generate configuration, palettes and class strings. You still need Tailwind in your build to turn those classes into CSS.
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.
