Comment utiliser : 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.
Aussi recherché comme : css to tailwind, convert css to tailwind, tailwind converter, css to tailwind classes, tailwind css generator, migrate css to tailwind.
Outils complémentaires : 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.
Questions fréquentes
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:.Puis-je installer CSS to Tailwind Converter en tant qu’application web et l’utiliser hors ligne ?
Oui. CSS to Tailwind Converter est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.