The best devtool for Tailwind CSS
Build, design and debug your Tailwind website visually, powered by AI, right within the browser.
Try on this page
Used by
+ 1000 other developers, designers and product managers!
+ 1000 other developers, designers and product managers!
Tailscan massively improves your Tailwind experience
Design with Tailwind in the browser
With Tailscan you'll never have to leave the browser. Change your Tailwind classes and see the results in real-time.
Debug visually in seconds
Always switching back and forth to your code editor while debugging your layout? Tailscan lets you see the results instantly, saving you precious time.
Discover how it's built
Tailscan lets you see the classes of any Tailwind component on any website, so you can learn and level up your design skills.
Prompt to restyle, instantly
Describe what you want in plain English and Tailscan AI applies the Tailwind changes for you.
* Requires Tailscan AI subscription
Prompt. Restyle. Ship faster.
AI-powered styling for Tailwind CSS. Describe what you want in plain English and watch the changes apply instantly.
Natural language styling
Describe changes like "make this button larger with rounded corners" and watch Tailwind classes apply automatically.
Direct manipulation
Restyle elements, move sections, and apply changes directly on any website. No blind code editing.
Export as code
Export your changes as clean code or reusable AI prompts to replicate styles across your project.
* Requires an active Tailscan AI subscription. Existing Tailscan Core customers get a discount.
Access to all Tailwind classes
With Tailscan, you can add any Tailwind class and variant directly in the browser.
Even when they are removed during your build process (purged by JIT) or when you add classes with arbitrary values.
You'll have the full power of Tailwind directly in the browser!
Bring-your-own Tailwind config
Add your own Tailwind config to Tailscan and all your theme extensions and modifications will be available right away.
Tailscan will adjust to your Tailwind project perfectly!
Convert elements to Tailwind components
Easily convert any website element into a Tailwind CSS component with Tailscan.
Save massive amounts of time and effort, just click and convert elements from your own project or any website into reusable Tailwind components.
Click & convert, it's really that simple!
Devtools integration
Add, edit and modify classes inside browser devtools and use native element selecting.
All classes are automatically compiled and the css generated from the classes instantly visible!
Guidelines and computed regions
Check element alignment, margin or padding values for each element or the element size easily with Guidelines and Computed Regions.
Copy element or class list
Easily copy the classlist or the entire element with the changes you made to your clipboard.
Autocompletion
Tailscan will suggest the right classes for you as you type and if relevant, show a preview of the color.
Experience the true power of Tailscan for Tailwind CSS
All these features are right at your fingertips within the browser. And this is just the start, more features are added in every update!
Live editing
Instantly see the result of every change you make.
Autocompletion
Tailscan will suggest the right classes for you as you type.
Hide/show classes
Hide or show classes to see how your design changes.
Color preview
See the color of every class in the autocompletion view.
Easy navigation
Hover over any element to see its Tailwind classes. Press Space to easily pin and edit the element.
Persistence
Tailscan will remember all your changes to every element so you can copy all changes at once!
Screenshot tool
Make screenshots of a particular part of the screen to share quick and easy!
Breakpoint info
Instantly know what Tailwind breakpoint you're currently on.
What Tailscan users say
I've been using Tailscan for the past 4 weeks and absolutely love it. I use Tailwind almost every day, so this tool saves me bunch of time! The most amazing thing is the integrated JIT engine support 💪
Dominik Sobe
Founder, HelpKit
I'm an early user of Tailscan. It's a great product! It makes my life so much easier & saves me a lot of time when working with TailwindCSS! 👏 Thank you for making this tool!
Nick
Founder, SEO HERO
Using Tailscan is so much better and intuitive than just hacking styles from the browser devtools. Getting it is a no-brainer for anyone working with Tailwind CSS!
Christian Blavier
Founder, Readable
Tailscan helps fill the gap that Nextjs provides with its live reload (preserves state) and Vite-based projects, so I can iterate on UI quickly. Very excited about this, so thank you! Great product!
Roland Ayala
Technical Program Manager
It completely changed how I approach debugging and quickly adjusting Tailwind CSS. Tailscan is a great helper in my everyday work and I wouldn't want to miss it again.
Alexander Schnebel
Founder, Product Glow Up
Wonderful tool! This has saved me so much time! Love the product and the dev is amazing with support as well!
Cannon Phelps
Founder, QuadBit
Pricing
Level up your development experience
Available for Chrome and Chromium-based browsers (like Edge, Brave and Arc).
7-day refund policyDedicated and fast support
Used by
Tailscan Core
Pay once, use Core forever
Includes all Core updates, forever
License for 3 devices
Permanent access to the Tailscan community discord
Tailscan Core + Tailscan AI
Includes Tailscan AI (unlimited requests*)
Pay once, use Core forever
Includes all Core updates, forever
License for 3 devices
Permanent access to the Tailscan community discord
* Unlimited but with a fair use policy of 1000 requests per month.
If you exceed this, we will change you to a different, cheaper model for that month.
Frequently asked questions
Can't find what you're looking for? Send us an email.
Get Tailscan now
The absolute must-have tool for anyone using Tailwind CSS.
Build, design and debug your Tailwind website visually with Tailscan, right within the browser.
Try on this page