WindFlow

Style your Webflow elements with ease! Use utility classes from the CSS framework TailwindCSS.

Never worry about combo classes again

Style your Webflow elements with ease! Use classes from the utility-first CSS framework TailwindCSS — grid, mt-8, text-lg and more, ready for your project.

Add WindFlow to your Webflow site and start styling, hassle-free!

The problem

You probably have tried creating classes in Webflow that are quite not "semantic." In other words, you need utility classnames. You just want a bottom margin of 16px, so you create a class called mb-16. Next time you know, you want the same element to be a flex box, so you carelessly create a combo class mb-16 + flex. The issue is that, you need to create another flex for another element that does not necessarily use mb-16.

Another workaround can be to create presets. Apply single classname mb-16 to an element, and single classname flex to another element. Then apply both to the target element. This creates extra work, but works fine.

‍

The solution

Frameworks and tools with utility classes already exist in the front-end development community. One that works really well and is easy-to-use is TailwindCSS. Just add a well-defined and intuitive classname to an element, and Tailwind creates the style for you on-the-fly. Tailwind creates what you just use.

Tailwind is not readily usable in Webflow. That is why WindFlow comes into action. This tool will allow you to apply Tailwind classnames to Webflow elements, and you will see the style changes instantly!

‍

Opportunities

What if you want to style your element fully with utility classes? You surely can! Devs who love using Tailwind enjoy the rapid development brought by it. No more thinking of the perfect semantic classname, only to lead to difficulties later down the line.

Not that utility classnames are the best way to do things. If we can combine the best of both worlds, we can surely develop websites fast and seamlessly.

‍

FAQs

Can I add preset colors and theme?

A: Yes. Just visit the Tailwind documentation to know how. You can edit the config file in a text editor and paste it to the config field in WindFlow.

Can I style hover states and the like (pseudo classes)?

A: Yes. Just visit the Tailwind documentation to know how. You can even style pseudoelements (if you are familiar with this CSS property).

Do I need to know how to code or frontend development?

A: Not necessarily. Tailwind classnames are intuitive and easy to follow. Config files are actually code, but looks intuitive enough. Visit the Tailwind documentation to know more.

Can I still style using the Webflow Designer?

A: Of course! Styles created using the Webflow Designer still work.