🌊 Convertisseur Tailwind CSS vers CSS Standard

Convert Tailwind CSS utility classes to plain CSS and back. Supports Tailwind v3 classes including spacing, colors, flexbox, grid. Free online converter.

Paste a list of Tailwind classes (like flex items-center p-4 text-lg font-bold) and get the equivalent plain CSS properties. Switch direction for CSS → Tailwind conversion. Useful when migrating projects or working without Tailwind in scope.

Tailwind Classes

CSS Output

How to Use

Choose direction

Select "Tailwind → CSS" to convert class names to CSS properties, or "CSS → Tailwind" to go the other way.

Paste your code

Type or paste Tailwind classes (space-separated) or CSS properties in the input area.

Copy the output

Click Convert and then Copy to use the result in your project.

Frequently Asked Questions

What does Tailwind CSS do? +

Tailwind CSS is a utility-first CSS framework where you compose designs using small single-purpose classes directly in your HTML, like text-lg, font-bold, p-4, flex, items-center. Each class maps to one or a few CSS declarations.

When should I convert Tailwind to plain CSS? +

When you need styles in a non-HTML context (email templates, React Native, PDF generators), when working with a team that does not use Tailwind, or when extracting styles for a CSS component library.

Does this converter support all Tailwind classes? +

This tool covers the most common Tailwind v3 utility classes: spacing, typography, colors, flexbox, grid, sizing, borders, shadows, and more. Arbitrary value classes (like w-[350px]) are not supported.

How do I convert CSS back to Tailwind? +

Switch the direction to CSS → Tailwind and paste your CSS properties. The tool maps declarations like margin: 0.5rem to m-2, display: flex to flex, etc.

Is JIT mode supported? +

The converter handles standard Tailwind v3 classes including responsive prefixes (sm:, md:, lg:) and state variants (hover:, focus:, dark:). JIT arbitrary values ([value]) are not converted.

Guide : Convertisseur CSS vers Tailwind

Qu'est-ce que c'est ?

Le Convertisseur Tailwind traduit le CSS personnalisé en classes utilitaires Tailwind CSS équivalentes, accélérant la migration de projets existants vers Tailwind.

Idéal pour les équipes qui adoptent Tailwind sur une codebase CSS existante ou pour apprendre les équivalences Tailwind.

Comment utiliser

Collez votre CSS dans le panneau d'entrée.
Les classes Tailwind équivalentes s'affichent dans le panneau de sortie.
Les propriétés sans équivalent direct sont indiquées pour révision manuelle.
Copiez les classes générées dans votre HTML.

Conseils professionnels

Certaines valeurs personnalisées nécessitent des classes arbitraires Tailwind : w-[247px].
Révisez toujours la sortie — certaines propriétés CSS complexes n'ont pas d'équivalent Tailwind direct.