Convertisseur de variables CSS vers configuration Tailwind

À quoi sert ce convertisseur ?

De nombreux projets commencent par des design tokens écrits sous forme de propriétés personnalisées CSS, par exemple --primary: #ff0055; ou --brand-500: #6366f1;. Lorsque vous adoptez Tailwind, vous avez besoin de ces mêmes couleurs dans son thème pour que des classes comme bg-primary et text-brand-500 existent. Les ressaisir est long et source d'erreurs : cet outil analyse chaque propriété personnalisée, conserve celles qui sont des couleurs et génère la structure Tailwind à votre place.

Comment les variables sont regroupées

• --brand-50 … --brand-900 deviennent un objet imbriqué brand: { 50: …, 900: … }, qui donne accès à bg-brand-50 jusqu'à bg-brand-900.
• Les suffixes comme -light, -dark, -hover et -foreground sont regroupés sous leur nom de base ; la variable simple devient DEFAULT, si bien que bg-primary et bg-primary-light fonctionnent tous les deux.
• Le préfixe color- est supprimé (--color-surface devient surface).
• Les tokens qui ne sont pas des couleurs, comme --radius-md: 8px ou les piles de polices, sont ignorés et listés.

Tailwind v3 ou v4 ?

Tailwind v3 configure les couleurs en JavaScript, sous theme.extend.colors. Tailwind v4 a déplacé la configuration vers le CSS : toute variable --color-* placée dans un bloc @theme génère des utilitaires de couleur. La palette par défaut de la v4 utilise l'OKLCH, c'est pourquoi la sortie v4 convertit les valeurs littérales en oklch().

Valeurs littérales ou références var() ?

Référencer les variables (primary: 'var(--primary)') permet de redéfinir --primary dans .dark ou dans un thème de marque : toutes les classes Tailwind suivent automatiquement. Notez que Tailwind v3 ne peut pas appliquer de modificateurs d'opacité comme bg-primary/50 aux couleurs var() simples ; si vous en avez besoin, stockez plutôt les canaux (--primary: 255 0 85 avec rgb(var(--primary) / <alpha-value>)). Tailwind v4 gère les modificateurs d'opacité sur les variables grâce à color-mix().

Aussi recherché comme : config tailwind, variables css tailwind, couleurs tailwind, propriétés personnalisées css, convertisseur css tailwind, thème tailwind, tokens de design, tailwind v4.

Outils complémentaires : Variables CSS vers Tailwind

• Générateur de couleurs Tailwind — Il vous suffit de coller une couleur de marque pour obtenir une palette de nuances équilibrée en 11 étapes (de 50 à 950) intégrée à OKLCH, avec des indications de contraste et des options d'exportation vers Tailwind v3, v4, CSS et SCSS.
• Convertisseur de couleurs — Collez n'importe quelle couleur CSS — HEX, rgb(), hsl(), hwb(), oklch() ou un nom comme tomato — et obtenez instantanément tous les autres formats, ainsi qu'une palette 50–950 prête à l'emploi.
• Formateur CSS — Transformez une feuille de style minifiée en CSS lisible, avec une propriété par ligne et des blocs @media correctement imbriqués.
• Trouveur de nom de couleur — Collez un code HEX pour obtenir son nom le plus proche, lisible par un humain, ainsi que des noms de tokens propres pour votre CSS, SCSS, JavaScript ou votre configuration Tailwind.