🪄 Winden will help you enjoy building a beautiful website using page builder and Tailwind CSS.
🤝 It works on any server, even shared-hosting. No need to install Node.js!
👋 Winden is a WordPress plugin that allows you to use Tailwind CSS inside your favorite page builders. It is agnostic and has no vendor lock-in, so you can use it with others page builders like Gutenberg, Elementor, Bricks Builder, Oxygen Builder, Zion Builder, etc.
Features
Winden is built with the following features in mind:
- ⚛️ Tiny Final CSS :
- A single CSS file for the entire website with less than 10KB
- Cache the final CSS file for production
- 🔓 Agnostic Integration :
- No vendor lock-in. Work with any of your favorite page builders
- Simple WordPress hooks to integrate your page builder
- The built-in support would be added for more page builders in the future
- ✂️ Developer Experience :
- The latest Tailwind CSS version (3.x) is always available
- Support for Tailwind CSS plugins, powered by Skypack
- WordPress hooks to customize the behavior of Winden
- ⚖️ Hybrid :
- Development — Developing your site accompanied by Tailwind CSS CDN and get the feedback instantly
- Production — Generate a single cached CSS file using the Worker
- ⚡️ Lightning-fast and 🪶 Lightweight : Production-ready with no performance impact
Prerequisites
The rest of the documentation assumes basic familiarity with Tailwind CSS. If you are new to Tailwind CSS, it might not be the best idea to jump right into the Winden as your first step – grasp the basics, then come back! 💪
Comparison with other tools
Across all CSS frameworks that specified in a page builder, Winden is the only one that is agnostic and not tied to any page builder. It gives you the freedom to use any page builder you want.
Winden is essentially a WordPress plugin that integrates Tailwind CSS with page builders seamlessly. We are standing on the shoulder of giants and are not trying to reinvent the wheel. It uses single learning curve and the same knowledge like everywhere, which is not limited only to the page builder.
We’ve also studied other CSS frameworks specified for page builders and would like to share our insights on the comparison. Hopefully will help you navigate the prismatic choices.
OxyNinja
OxyNinja is a lightweight, responsive and modern utility CSS framework that created exclusively for Oxygen Builder[1]. It comes with a collection of pre-made components and templates to boost your productivity.
On the other hand, Winden is not tied to Oxygen Builder and doesn’t come with any pre-made components or templates. However, there are tons of pre-made components and templates that are already available out there, such as:
OxyMade
OxyMade has the same goal, which brings the power of Tailwind CSS into the page builder.
Oxymade is a fork of the Tailwind CSS framework that exclusive to Oxygen Builder. The objective of the fork is to overcome the limitation of Tailwind CSS version 2.x, which requires Node.js to output the CSS styles. The fork is also made to be compatible with Oxygen Builder, in which the class names are limited to alphanumeric characters only. Therefore, OxyMade only synced up to Tailwind CSS 2.x, where the latest Tailwind CSS version is 3.x.
OxyMade comes with a collection of pre-made components and templates to boost your productivity. However, the component and templates are exclusively used inside the Oxygen Builder; you can’t use it with other page builders or even plain HTML.
OxyProps
OxyProps is the first modern CSS custom properties CSS Framework for Oxygen Builder. It is inspired, and built on top of Open Props, an open source collection of expertly crafted web design token, that aimed at creating consistent components[5].
It has the same purpose as Winden, which integrates an existing CSS framework with the page builder. However, OxyProps is not agnostic and only works with Oxygen Builder.
TailPress
TailPress is a WordPress plugin similar to Winden, which integrates Tailwind CSS with WordPress. However, TailPress uses a fixed Tailwind CSS version embedded in the plugin and doesn’t support Tailwind CSS plugins. It also produces multiple CSS files — a file for each page that you require to load the page on your browser to generate the cache, which is not ideal for production.