The Tailwind Tangle: Låter bekant? Om du är något som mig och tillbringar en bra del av din dag med att arbeta med Tailwind CSS, har du förmodligen känt den lilla friktionspunkten: oändligt justera klasser, klicka fram och tillbaka mellan din redaktör och webbläsaren, bara för att se hur saker och ting fungerar. Eller kanske du gräver igenom utvecklingsverktygen, försöker identifiera exakt vilken kombination av verktygsklasser som stilar ett element? Faktiskt Det kan vara en riktig arbetsflödesmördare och bryta ditt fokus. Tail Lens: Din Tailwind Editor i webbläsaren What if you could cut out the middleman and edit Tailwind classes , directly on your page, with instant visual feedback? live levande Det är just därför jag är så glad över att dela , en webbläsartillägg som jag har arbetat med för att lösa dessa exakta frustrationer. Det fungerar som ditt in-browser-dev-verktyg, som låter dig klicka på något element och justera dess Tailwind-klasser direkt på sidan. Tail Lens Ändringar visas omedelbart, så att du kan se resultat när du redigerar. Smart klassförslag, Tailwind v3/v4 + JIT-stöd, snabb elementnavigering och många fler. Vad kan Tail Lens göra för dig? Här är en närmare titt på vad Tail Lens ger till ditt Tailwind-arbetsflöde: 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. 👁️ mer Instant Class View Hover över något element för att omedelbart se alla tillämpade Tailwind klasser. ☀️ Live Edit & Preview Sök, lägg till eller byta Tailwind-klasser och se ändringar omedelbart på din sida, utan att uppdatera. Smart Alternatives Få smarta förslag på alternativa klasser som du kan tillämpa med ett enda klick. Visual Overlays Visualisera tydligt marginal, padding, höjd och positionering med dynamiska, realtidsöverlappningar. ️ Undo/Redo Support Experimentera fritt! Återställ enkelt eller gör om alla ändringar du gör. ️ Config Ready Full support for Tailwind CSS v3/v4 and your project's custom . tailwind.config.js ️ DOM Navigation Inspektera snabbt förälder- eller barnelement med enkla tangentbordskort för snabbare arbetsflöde. Varför jag byggde Tail Lens Jag byggde Tail Lens eftersom jag verkligen ville ha ett verktyg som detta för mina egna projekt. Målet är enkelt: att hålla dig i flödet, minska den frustrerande kontextsväxlingen och i slutändan göra arbetet med den fantastiska kraften i Tailwind CSS ännu roligare och mer produktivt. Prova Tail Lens: Gratis i 7 dagar! Redo att ge det en spin och se hur det passar in i ditt arbetsflöde? Du kan prova den fulla versionen av Tail Lens Inga åtaganden, bara en chans att se magin hända. free for 7 days Dyk in i den snabba demo och börja här: Skärgård.io Skärgård.io Skärgård.io Lifetime Access och framtida uppdateringar Efter testet, om du finner Tail Lens så oumbärlig som jag hoppas att du kommer att, är det ett engångsköp av Detta inkluderar alla framtida uppdateringar och du kan använda den på obegränsade enheter. $30 for a lifetime license Användare kärlek Låt oss höra från dig! 🙂 Jag skulle vara glad att höra någon feedback, idéer eller frågor du har. Vilka är dina största utmaningar när du arbetar med Tailwind CSS dagligen? Kan ett verktyg som Tail Lens hjälpa till att effektivisera din process? Släpp dina tankar, förslag eller till och med bara ett "hej" i kommentarerna nedan! Lycklig kodning!
