So nutzt du: CSS to Tailwind Converter
- Paste CSS rules (with selectors) or just declarations.
- Read the class list generated for each selector.
- Copy the classes into your HTML or JSX; review arbitrary values and replace them with theme tokens where it makes sense.
How values are mapped
Tailwind’s default spacing scale uses steps of 0.25 rem (4 px), so padding: 16px becomes p-4 and margin: 0 auto becomes my-0 mx-auto. Values that are not on the scale use arbitrary-value syntax: padding: 13px → p-[13px]. Typography, radii and weights map to their named steps:
| CSS | Tailwind |
|---|---|
display: flex; flex-direction: column | flex flex-col |
gap: 16px | gap-4 |
font-size: 24px; font-weight: 700 | text-2xl font-bold |
border-radius: 12px | rounded-xl |
background-color: #7c5cff | bg-[#7c5cff] |
width: 100% | w-full |
.btn:hover { color: #fff } | hover:text-white |
Limits to know
- Colors become arbitrary values; map them to your theme palette (for example
bg-violet-500) afterwards — the CSS variables to Tailwind tool helps define a theme. - Properties without a utility are written as arbitrary properties:
[mask-image:url(...)]. - Media queries, complex selectors and animations need manual translation to
md:,group-hover:and theme config. !importantbecomes the!prefix.
For one-off values, the Tailwind arbitrary value generator builds individual classes, and the Tailwind color generator creates full palettes.
Auch gesucht als: css to tailwind, convert css to tailwind, tailwind converter, css to tailwind classes, tailwind css generator, migrate css to tailwind.
Passende Tools zu: CSS to Tailwind Converter
- PX to REM Converter — Convert between pixels, rem and em with your own root font size — or paste a whole stylesheet and convert every px value in one go.
- CSS Formatter — Turn a minified stylesheet into readable CSS with one property per line and properly nested @media blocks.
- CSS Animation Generator — Design CSS animations on a real keyframe timeline.
- CSS Keyframes Generator — A visual editor for @keyframes.
Häufige Fragen
Does it support Tailwind v4?
Yes. The generated utilities and arbitrary values work in Tailwind v3 and v4.
Why are colors written as bg-[#hex]?
Exact colors are kept as arbitrary values so nothing changes visually. Replace them with your theme colors when you have a palette.
Can it convert media queries?
Not automatically. Convert the rules inside a media query separately and add the right responsive prefix, such as
md:.Kann ich CSS to Tailwind Converter als Web-App installieren und offline nutzen?
Ja. CSS to Tailwind Converter ist eine installierbare Web-App (PWA) – sie wird über Ihren Browser installiert und nicht aus einem App-Store heruntergeladen. Klicken Sie oben auf dieser Seite in Chrome oder Edge (Windows, macOS, Linux, ChromeOS) auf „App installieren“ oder verwenden Sie auf Android-Geräten „Teilen“ → „Zum Startbildschirm hinzufügen“ auf dem iPhone und iPad bzw. „Datei“ → „Zum Dock hinzufügen“ in Safari 17+ auf einem Mac. Die App öffnet sich dann in einem eigenen Fenster mit einem eigenen Symbol, und da sie vollständig in Ihrem Browser ausgeführt wird, funktioniert sie auch offline. Firefox auf dem Desktop kann keine Web-Apps installieren. So funktioniert die Installation.