Tailscan
Instant Tailwind class inspector & editor
- Code Editor
- Code Export
What Is Tailscan?
Tailscan is a browser extension that turns DevTools into a full-blown visual playground for Tailwind CSS, letting you build, design and debug without leaving the page.
It works on any Tailwind project – React, Next.js or plain HTML – because it hooks into the final HTML the browser sees. Think of it as Tailwind’s missing “what-you-see-is-what-you-change” layer, saving you countless round-trips to your code editor.
Features ✨
Live editing – tweak classes and watch the layout update instantly
Smart autocompletion with colour previews and breakpoint hints
Hide / show classes to test alternatives without deleting code
Copy class list or full element to clipboard in one click
Convert any element to a Tailwind component – handy for refactors
Guidelines & computed regions overlay for margins, padding and sizes
Bring-your-own tailwind.config.js so custom palettes and spacing work
Regular updates – latest build 2.2.2 landed Nov 2024
Pros and Cons
Pros ✅
Slashes feedback loops by keeping edits in the browser
Works on any live site – great for learning from others
Component-conversion accelerates migration to Tailwind
Active solo-founder; frequent feature drops and blog updates
Fair pricing with one-time lifetime licence option (US $89)
Cons ⚠️
Chrome-only for now; Firefox build is still a wish-list item
Paid licence required after on-site demo; no free tier
Extension adds a small performance overhead on low-spec laptops
Autocompletion list can feel cramped on very narrow screens
Integration
React, Next.js & Remix – works because it reads rendered HTML
Vue & Nuxt – same story: anything that ultimately outputs Tailwind classes
Laravel Blade or PHP – edit right on the deployed site
Any static-site generator (Astro, Eleventy, Hugo)
Works alongside dev-server hot-reload; no extra config needed
FAQ
Q1. Does Tailscan work in Firefox?
Not yet – the dev has expressed interest but hasn’t shipped a Firefox version
Q2. Can I try it without buying?
Yes, there’s a live demo on tailscan.com where you can pin the tool and play around
Q3. Will it recognise my custom Tailwind theme?
Absolutely – drop in your tailwind.config.js and autocompletion switches to your palette and spacing tailscan.com
Q4. Is the code open-source?
A community-maintained dev-tools fork exists on GitHub, but the official Chrome extension is proprietary