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. Ou 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? en fait 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 , directly on your page, with instant visual feedback? live vivant C'est pour ça que j'ai hâte de partager , 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. Tail Lens 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: Feature Description 👁️ Instant Class View Hover over any element to immediately see all applied Tailwind classes. No more digging in dev tools! ⚡ Live Edit & Preview Search, add, or swap Tailwind classes and see changes instantly on your page, without refreshing. 💡 Smart Alternatives Get intelligent suggestions for alternative classes you can apply with a single click. 📏 Visual Overlays Clearly visualize margin, padding, height, and positioning with dynamic, real-time overlays. ↩️ Undo/Redo Support Experiment freely! Easily undo or redo any changes you make. 🛠️ Config Ready Full support for Tailwind CSS v3/v4 and your project's custom . tailwind.config.js ⌨️ DOM Navigation Quickly inspect parent or child elements using simple keyboard shortcuts for faster workflow. 👁️ 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 projet . tailwind.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 Lens Aucun engagement, juste une chance de voir la magie se produire. free for 7 days Plongez dans la démo rapide et commencez ici : Télécharger.io Télécharger.io 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 Cela inclut toutes les mises à jour futures et vous pouvez l'utiliser sur un nombre illimité d'appareils. $30 for a lifetime license 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 !
