Tailscan for Tailwind CSS

L'idée centrale, c'est que vous ne quittez jamais la page. Survolez un élément pour voir ses classes Tailwind, appuyez sur Espace pour l'épingler, puis ajoutez, modifiez ou masquez des classes pendant que le design se met à jour en temps réel. Les changements sont conservés par élément, donc vous pouvez expérimenter librement et copier toutes les modifications d'un coup une fois terminé. Pour qui déteste le cycle enregistrer-recharger, c'est la fonction qui justifie l'outil.

La version 3 ajoute un panneau IA qui transforme une demande en langage naturel en changements Tailwind. Vous tapez quelque chose comme « fais ce bouton plus grand avec des coins arrondis » et les classes s'appliquent seules, avec la possibilité de les garder comme utilitaires visibles. Il exporte aussi vos changements en code propre ou en prompts réutilisables afin de répéter le même style dans tout un projet. Le bémol tient au compteur : l'offre autorise 1000 demandes IA par mois, après quoi elle vous bascule sur un modèle moins cher pour le reste du mois.

Vous pouvez convertir un élément en composant Tailwind d'un clic. Tailscan transforme n'importe quel élément de n'importe quel site en composant Tailwind CSS réutilisable. Autrement dit, vous pouvez prendre une carte, une barre de navigation ou un bouton qui vous plaît, le convertir et déposer le balisage dans votre projet au lieu de le réécrire classe par classe. C'est la partie qui change l'inspection en véritable résultat, et c'est pourquoi les gens l'utilisent sur des sites qui ne sont pas les leurs.

Vous pouvez ajouter n'importe quelle classe et variante Tailwind, y compris celles que votre build purge et celles qui utilisent des valeurs arbitraires. Apportez votre propre configuration Tailwind et vos extensions de thème apparaissent aussitôt, si bien que les suggestions correspondent à votre projet et non au Tailwind par défaut. Ce dernier point compte pour les équipes qui s'appuient sur des échelles personnalisées, car un inspecteur limité aux valeurs standard leur devient vite inutile.

Tailscan s'intègre aux devtools du navigateur. Vous pouvez modifier les classes dans le panneau des devtools et utiliser la sélection native d'éléments, et chaque classe est compilée à mesure que vous tapez. L'autocomplétion propose la bonne classe et prévisualise sa couleur, tandis qu'un indicateur de point de rupture vous dit quel point de rupture Tailwind vous regardez. C'est la différence entre deviner un nom de classe et se le faire indiquer.

Les régions calculées et les repères montrent la marge et le padding réels autour d'un élément, donc les problèmes d'alignement cessent d'être des devinettes. Un outil de capture intégré photographie une partie de l'écran pour une transmission rapide, et vous pouvez copier la liste de classes ou l'élément entier avec vos modifications déjà intégrées. De petits conforts, mais qui s'accumulent au fil d'une journée de travail.