Enfin, un débogueur Tailwind qui vit dans votre navigateur

The Tailwind Tangle : le son familier ?

Si vous êtes quelque chose comme moi et que vous passez une bonne partie de votre journée à travailler avec Tailwind CSS, vous avez probablement ressenti ce petit point de friction: ajuster les classes sans fin, cliquer entre votre éditeur et le navigateur, juste pour voir comment les choses se passent.en faitOu peut-être que vous creusez à travers les outils de développement, en essayant de déterminer exactement quelle combinaison de classes d'utilité est le style d'un élément?

Il peut être un véritable tueur de flux de travail et briser votre attention.

Présentation de Tail Lens : votre éditeur Tailwind dans le navigateur

What if you could cut out the middleman and edit Tailwind classes live, directly on your page, with instant visual feedback?

C'est pour ça que j'ai hâte de partagerTail Lens, une extension de navigateur sur laquelle j'ai travaillé pour résoudre ces frustrations exactes. Il agit comme votre outil de développement dans le navigateur, qui vous permet de cliquer sur n'importe quel élément et de modifier ses classes Tailwind directement sur la page.

Les modifications apparaissent instantanément, de sorte que vous pouvez voir les résultats lorsque vous modifiez. suggestions de classe intelligente, prise en charge de Tailwind v3/v4 + JIT, navigation rapide des éléments et bien plus encore.

Que peut faire Tail Lens pour vous?

Voici un aperçu de ce que Tail Lens apporte à votre flux de travail Tailwind:

👁️Instant Class View

Hover sur n'importe quel élément pour voir immédiatement toutes les classes appliquées Tailwind.

Live Edit & Preview

Recherchez, ajoutez ou échangez des classes Tailwind et voyez immédiatement les changements sur votre page, sans refresh.

Smart Alternatives

Obtenez des suggestions intelligentes pour des classes alternatives que vous pouvez appliquer en un seul clic.

Visual Overlays

Visualisez clairement la marge, le padding, la hauteur et le positionnement avec des superpositions dynamiques en temps réel.

️Undo/Redo Support

Essayez librement! Désactiver ou réinitialiser facilement les modifications que vous apportez.

️Config Ready

Prise en charge complète de Tailwind CSS v3/v4 et de la personnalisation de votre projettailwind.config.js.

⌨️ DOM Navigation

Inspectez rapidement les éléments parents ou enfants à l'aide de raccourcis clavier simples pour un flux de travail plus rapide.

Pourquoi j'ai construit une lentille de queue

I built Tail Lens because I genuinely wanted a tool like this for my own projects. The goal is simple: to keep you in the flow, reduce that frustrating context switching, and ultimately make working with the awesome power of Tailwind CSS even more enjoyable and productive.

Essayez Tail Lens: Gratuit pendant 7 jours!

Prêt à lui donner un spin et voir comment il s'insère dans votre flux de travail?

Vous pouvez essayer la version complète de Tail Lensfree for 7 daysAucun engagement, juste une chance de voir la magie se produire.

Plongez dans la démo rapide et commencez ici :Télécharger.io

Accès à vie et futures mises à jour

Après l'essai, si vous trouvez que Tail Lens est aussi indispensable que je l'espère, c'est un achat unique$30 for a lifetime licenseCela inclut toutes les mises à jour futures et vous pouvez l'utiliser sur un nombre illimité d'appareils.

Utilisateur Amour

Nous allons entendre de vous! 🙂

Je serais ravie d'entendre tout commentaire, idées ou questions que vous avez.

• Quels sont vos plus grands défis au quotidien avec Tailwind CSS ?
• Un outil comme Tail Lens pourrait-il vous aider à rationaliser votre processus?

Laissez vos pensées, suggestions, ou même juste un « bonjour » dans les commentaires ci-dessous!

Bonne journée de codage !