Tailwind Helper inspecte n'importe quel élément d'une page web et génère une analyse complète et catégorisée des utility classes Tailwind CSS correspondantes. Contrairement à une simple chaîne de classes, il organise les résultats par catégorie — Layout, Spacing, Typography, Colors, Borders et Effects — afin que vous compreniez exactement ce que contrôle chaque classe.
Tandis que Copy as Tailwind vous fournit une chaîne de classes rapide à coller, Tailwind Helper est son complément d'analyse approfondie. Il est conçu pour les développeurs qui souhaitent comprendre la composition stylistique complète d'un élément en termes Tailwind. Chaque propriété CSS calculée est mappée à son équivalent Tailwind et regroupée dans des catégories logiques. Vous pouvez voir d'un coup d'œil qu'un élément utilise un layout flex avec un alignement items-center, possède un padding p-5 avec un gap-3 entre les enfants, utilise text-lg font-bold pour la typography, et a l'apparence bg-slate-900 rounded-lg border border-slate-700. Cliquez sur n'importe quelle balise de classe individuelle pour copier uniquement celle-là, ou utilisez "Copy All" pour récupérer la chaîne complète. La vue catégorisée facilite la sélection précise des classes dont vous avez besoin, plutôt que de tout copier.
Les classes Tailwind sont organisées en catégories claires : Layout (flex, grid, position), Spacing (padding, margin, gap), Typography (taille de police, graisse, couleur), Colors (arrière-plan, texte, border), Borders (rayon, largeur, style), et Effects (shadow, opacity, transform). Chaque catégorie est réductible et clairement étiquetée.
Cliquez sur n'importe quel élément — boutons, cartes, titres, inputs, conteneurs — et le panneau se remplit instantanément avec l'analyse complète des classes Tailwind. L'élément est mis en surbrillance avec une border violette afin que vous sachiez exactement ce qui est inspecté.
Chaque classe Tailwind est affichée sous forme de balise cliquable. Cliquez sur n'importe quelle balise individuelle (comme p-5 ou font-bold) pour copier uniquement cette classe dans votre presse-papiers. Une discrète animation "copié" confirme l'action. Idéal lorsque vous n'avez besoin que d'une ou deux classes spécifiques.
Le bouton "Copy All Classes" en bas génère une chaîne propre séparée par des espaces de toutes les classes Tailwind et la copie dans votre presse-papiers. Prête à coller directement dans className="..." ou class="...".
Chaque valeur est mappée à l'échelle de spacing et de dimensionnement par défaut de Tailwind. Une police de 16px correspond à text-base, un padding de 24px correspond à p-6, et #7c3aed correspond à purple-600. Lorsqu'une correspondance exacte n'existe pas, la valeur d'échelle la plus proche est choisie et signalée.
Survolez n'importe quelle balise de classe Tailwind dans le panneau pour voir la valeur CSS calculée originale à partir de laquelle elle a été générée. Par exemple, survoler "p-5" affiche "padding: 20px". Cette vue bidirectionnelle vous aide à apprendre l'échelle Tailwind en reliant les classes aux vraies valeurs CSS.
Assistant Tailwind covers the following, organized by category:
flexgridblockinline-flexrelativeabsolutestickyitems-centerjustify-betweengap-*p-* (padding)m-* (margin)px-* py-*mx-autospace-x-*w-* h-*max-w-*min-h-*text-sm / text-base / text-lgfont-normal / font-boldleading-* (line-height)tracking-* (letter-spacing)text-centeruppercasetext-{color}-{shade}bg-{color}-{shade}border-{color}-{shade}opacity-*borderborder-2rounded-* (radius)border-solid / dasheddivide-*shadow-sm / shadow-md / shadow-lgring-*transitionduration-*hover:*Contrairement à une chaîne de classes plate, la vue catégorisée vous permet de comprendre la composition complète d'un élément. Voyez qu'une carte utilise un layout flex, un padding spécifique, une typography en gras, un arrière-plan slate, des bordures arrondies et une shadow subtile — chaque aspect dans sa propre section.
Inspectez un élément bien conçu sur n'importe quel site web, puis recréez-le dans votre projet Tailwind en copiant les classes de catégories pertinentes. Prenez le layout d'un élément, la typography d'un autre, et les couleurs de votre palette de marque — mélangez et assemblez.
Survolez les balises de classes pour voir les valeurs CSS sources. Ce mapping interactif est la façon la plus rapide d'apprendre que p-4 signifie 16px, que text-lg signifie 18px, ou que purple-600 correspond à #7c3aed. Transformez n'importe quel site web en exercice d'apprentissage Tailwind.
Inspectez les éléments de votre propre site construit avec Tailwind pour vérifier qu'ils utilisent des spacing, couleurs et typography cohérents provenant du design system. Repérez les valeurs ponctuelles accidentelles (comme p-[13px]) qui devraient être des valeurs d'échelle standard (p-3 ou p-3.5).
Utilisez Copy as Tailwind lorsque vous avez besoin d'une chaîne de classes rapide à coller. Utilisez Tailwind Helper lorsque vous souhaitez étudier l'analyse détaillée, copier des classes individuelles de manière sélective, ou comprendre pourquoi des classes Tailwind spécifiques ont été choisies pour chaque propriété CSS.
Ouvrez le dock flottant DevSuite Pro et cliquez sur l'icône Tailwind Helper. L'outil s'active et un panneau apparaît sur le côté droit, prêt à afficher les analyses de classes.
Cliquez sur n'importe quel élément de la page. Il est mis en surbrillance avec une border violette, et le panneau se remplit avec les classes Tailwind catégorisées. Chaque catégorie (Layout, Spacing, Typography, Colors, Borders, Effects) est présentée comme une section avec des balises de classes.
Parcourez les catégories pour comprendre la composition stylistique complète de l'élément. Chaque classe est une balise cliquable — survolez pour voir la valeur CSS source, cliquez pour copier cette classe individuelle.
Cliquez sur des balises individuelles pour copier des classes spécifiques, ou utilisez le bouton "Copy All Classes" en bas pour tout récupérer en une seule chaîne. Collez directement dans votre composant Tailwind.
Cliquez sur un autre élément de la page pour mettre instantanément à jour le panneau avec de nouvelles classes. Pas besoin de désactiver et de réactiver — continuez simplement à cliquer pour inspecter plusieurs éléments en séquence.
Installez DevSuite Pro gratuitement et débloquez plus de 39 outils de développement pour votre navigateur.