Générateur de configuration Tailwind

Composez un fichier tailwind.config.js avec vos couleurs de marque, polices et espacements personnalisés, sans écrire l'objet JavaScript à la main. Traitement 100% local — rien n'est envoyé à un serveur.

Exemple :
Un motif de fichier par ligne.
tailwind.config.js

Comment ça marche

Plutôt que d'écrire manuellement l'objet de configuration Tailwind CSS, renseignez vos couleurs de marque, vos familles de polices et vos espacements additionnels dans les formulaires ci-dessus : l'outil assemble en direct un fichier tailwind.config.js valide avec la section theme.extend correctement structurée, prêt à remplacer votre fichier existant.

Pourquoi utiliser theme.extend plutôt que theme directement ?

Placer vos ajouts dans theme.extend permet de conserver toutes les valeurs par défaut de Tailwind (couleurs, tailles, espacements standards) tout en ajoutant vos propres valeurs ; redéfinir directement theme remplacerait entièrement les valeurs par défaut, ce qui est rarement souhaité.

Que signifie le choix du mode sombre "class" ou "media" ?

Avec class, le mode sombre s'active en ajoutant la classe dark sur un élément parent (généralement <html>), ce qui permet de le basculer manuellement via JavaScript ; avec media, Tailwind suit automatiquement la préférence système de l'utilisateur sans contrôle manuel possible.

Le fichier de configuration est généré directement dans votre navigateur, sans envoi de données à un serveur.