Convert any HTML element to Tailwind CSS with Windy

Windy is our newest Beyond Code product. It is a browser extension for Tailwind CSS developers. The extension can copy any HTML element on any website and transform it into HTML with Tailwind CSS classes.

Do you want to convert an existing website to Tailwind CSS or do you want to see how an existing element would be built with Tailwind CSS? With Windy, you can simply hover over any element, and the extension will instantly display the Tailwind CSS classes that would get applied to the selected element – no matter what frontend framework the website is using: Bootstrap, Bulma, handwritten inline styles – you name it.

With one click, you can copy the HTML element with all of its children converted to Tailwind CSS.

Here’s a quick demo of the extension:

Instead of spending weeks rebuilding existing websites or elements with Tailwind CSS, Windy simplifies this process and lowers the time significantly.

#Developer tool integration

In addition to being able to hover over any HTML element, Windy also integrates directly into your browser’s developer tools. You can highlight the HTML element in the developer tools, and Windy will show you the appropriate Tailwind CSS classes, as well as giving you the ability to copy the HTML code.

#Getting Windy

At the moment, Windy is available in early access as a Chrome and Firefox extension. Safari support is coming later in January 2021.

Try Windy on the Windy website and grab a license before the early access launch offer expires.

We put a lot of time and effort into Windy, to make it the Tailwind CSS browser extension for web developers.