Convert CSS to Tailwind classes
Paste CSS properties and get the equivalent Tailwind CSS utility classes instantly, ready to copy into your markup. Free and runs in your browser.
- Files never leave your device
- Free, no sign-up
- No watermark
About CSS to Tailwind Converter
Moving a project to Tailwind CSS or translating a design spec? Paste plain CSS properties, one per line, and get the matching Tailwind utility classes straight away. Spacing, layout, flexbox, typography, colours and border radius are mapped to Tailwind’s scale, so you can copy the class list into your markup instead of looking up each utility.
How to use CSS to Tailwind Converter
- 1
Paste CSS properties, one per line.
- 2
Read the Tailwind classes generated for each property.
- 3
Copy the class list.
- 4
Paste it into your HTML or JSX.
Why use this tool
- Converts common layout, spacing, typography and colour properties.
- Maps values to Tailwind’s default scale.
- One-click copy of all classes.
- Great for migrations and design handoff.
- Runs locally.
Frequently asked questions
Use an arbitrary value class such as p-[13px], or add the value to your Tailwind theme.
It converts property declarations. Selectors, media queries and nesting need to be translated by hand.
Class names follow Tailwind’s standard utility naming used in current versions.
Paste the properties inside the braces; one property per line works best.
No. Everything is processed in your browser tab. Nothing you type or paste is sent to CodeMites or any other server.
Yes. There is no account, no watermark and no usage limit. The tool runs in your own browser, so there is no server cost to charge you for.
Yes. It runs in any modern browser on Android and iOS as well as on Windows, macOS and Linux, with nothing to install.
Yes. Paste the classes into className in React, or class in Vue, Svelte and plain HTML.
Yes. Anything you create with this tool is yours to use in personal and commercial work, with no attribution required.
Related tools
All CSS & Design tools →- Flexbox PlaygroundBuild flexbox layouts visually: direction, wrap, justify, align and gap for the container and items, with live preview and copyable CSS.
- CSS Unit ConverterConvert CSS units between px, rem, em, %, vh and vw with your own root font size and viewport.
- CSS FormatterBeautify messy or minified CSS with clean indentation, or minify it for production, in a code editor with syntax highlighting.
- CSS Gradient GeneratorCreate linear and radial CSS gradients visually: pick colours, add stops, set the angle and copy the code.
- Box Shadow GeneratorDesign CSS box shadows visually with offsets, blur, spread, colour and multiple layers, then copy the code.
- Text Shadow GeneratorCreate CSS text-shadow effects such as glow, outline and 3D with up to five layers and presets.