bg-blue-200 rounded box-border font-medium px-2 text-black transition-all duration-300 hover:bg-blue-300
You can try out Windy on this site.
Take a look at the source code and you'll see that it has custom classes – highlight any element and you will get the respective Tailwind class names.
The Windy browser extension transforms any element on any website into Tailwind CSS classes and HTML.
Just highlight the element and click to copy. Done. You can even copy whole websites, by copying the body tag.
Windy also copies pseudo element styles, like :hover or .
Windy detects media queries and applies Tailwind CSS prefixes to all classes.
bg-blue-200 md:bg-green-200 lg:bg-red-200 p-4 rounded text-2xl leading-normal p-4 text-black
Open the dev tools on any site and magically see Tailwind classes on every HTML element. Add new ones to modify the element to your needs and copy it directly to your new project.
Marcel out here trying to completely kill the energy around my "Rebuilding X with Tailwind CSS" screencasts 😂 Really fun tool, check it out!
Windy paid for itself in the first two hours after we purchased it. I transitioned a bootstrap 4 site and saved a solid two days in fiddling around with layouts, fonts, and table styling. Completely worth it, can’t say enough about it.
The fact that it lets me spend time on fine tuning the code instead of mindlessly smashing away on the keyboard is worth soo much! Getting it was a no brainer and im just sad it wasnt a part of my stack earlier!
Why are you calling it "early access"?
While we are already very happy with the current version of Windy, we still want to add additional features and focus on bringing the extension to Safari.
The core feature - transforming existing HTML to Tailwind - already works extremely good, so instead of waiting for us to add more features, you can already use and enjoy the extension right away.
If you run into any issues, feel free to visit our Windy community repository here.
What are concurrent activations?
One activation is connected to one machine and one browser. You can remove an activation to activate it somewhere else anytime.
Where can I download the Windy extension?
After purchasing a license for Windy, you will get access to the extension via the Beyond Code dashboard.
Do I get an exact Tailwind CSS representation for all elements on a site?
Windy can not guarantee a 100% correct conversion. Colors are adjusted to the nearest matching color in the Tailwind color scheme. Missing styles will be shown for properties that can not be mapped to Tailwind classes.
Do you have a refund policy?
Yes – if you are not happy with your purchase, email us at firstname.lastname@example.org.
In case you need help with your purchase, please send an email to email@example.com. We track down lost emails, process refunds, or link licenses with Beyond Code accounts.