Category: Winden

  • Installation

  • Migration to 2.0

    After upgrade steps Once you migrate from version 1 to version 2 your config will be different. Do not worry you didn’t lost it, it’s just due to new code structure, its located on another location. That is why we made simple plugin to convert your data to the new location. Installation Make sure you…

  • Introduction

    🪄 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,…

  • Why Tailwind CSS

    Tailwind CSS is a utility-first CSS framework packed with classes like flex, pt-4, text-center, dark:bg-blue, and rotate-90 that can be composed to build any design, directly in your HTML. Some highlighted features of Tailwind CSS:

  • Winden: How does it work?

    The Winden implements the CDN for the development inside the Oxygen, Bricks and Gutenberg editor and the Worker to generate the CSS cache for production. CDN Prior to Tailwind CSS v3.0 (v2.0 or earlier), the CDN provided is a giant CSS file that contains pre-generated CSS classes for every default class that is available in…

  • Production

    Once you are ready with your website development it’s end of puling robust framework and it’s time replacing it with optimised one. Compile our production ready CSS. Now Winden will start pulling optimised production ready CSS and you will not see warning in the console that “cdn.tailwindcss.com should not be used in production. To use…

  • Import plugins

    Why we moved to ESM import? ECMAScript Modules (ESM) represent the modern standard for structuring and packaging JavaScript code, offering native support in both browsers and Node.js. ESM’s adoption brings several benefits, including native module loading without the need for additional tools, efficient code splitting through dynamic imports, and improved optimization possibilities such as tree…

  • Fluid Typography

    NPM Link: https://www.npmjs.com/package/tailwindcss-fluid-typography New to ESM import?

  • Flowbite

    Flowbite Configuration Link: https://flowbite.com/docs/getting-started/quickstart/ New to ESM import?

  • DaisyUI

    DaisyUI Configuration Link: https://daisyui.com/docs/config/ New to ESM import?

  • Tailwind Animations

  • Fluid Tailwind

    Visit Fluid Tailwind Website → You can also create your own font sizes: Size fail is connected with the accessibility violation. And at this point you can not bypass that. Issue regarding this matter is already open. You can read more about that on their github issues: https://github.com/barvian/fluid-tailwind/issues/11

  • CDN Version Rollback

    What to do if library stop working? Recently we had incident where Fluid Typography was working one day and just stop working. So where to start??? Always console log first! Bellow you can see how I investigated console log and that the error is inside Fluid Typography Library. Go to the GitHub and investigate the…

  • Integrations

    Winden is a page builder agnostic Tailwind CSS integration for WordPress. It is designed to work with any page builder or theme — no vendor lock-in. Built-in integration Winden comes with built-in integration with the following page builders: And we plan to add more first-class integrations in the future. WordPress hooks Winden provides simple WordPress…

  • Bricks Builder

    We have first-class support for Bricks Builder, a powerful page builder for WordPress. SYNC_BREAKPOINT placeholder In the Bricks Builder 1.5.1 release, Bricks Builder introduced a new feature called “Custom Breakpoints” that allows you to edit the default breakpoints, add your own custom breakpoints, set a different base breakpoint, and use a mobile-first design approach. Winden…

  • Scripts Organizer

    While Winden provides built-in integration, we also provide a collection of custom integration snippets that you can copy-paste into your themes’ function.php file or use the Code Snippets plugin. Scripts Organizer – ACF Gutenberg Addon Scripts Organizer – ACF Gutenberg Addon is an add-on for Scripts Organizer plugin that allows you to Create Gutenberg blocks…

  • Oxygen Autocomplete Suggestion

    While Tailwind CSS’ classes name convention has a simple pattern and is easy to remember, it’s may convenient and faster to write the classes name with the support of autocomplete suggestions. The Windens’s autocomplete suggestion generator is based on the tailwindcss-classnames package which running on our generated autocomplete file. The Winden plugin has a built-in autocomplete integration…

  • Page Development with Oxygen Builder

    In this tutorial, you will learn best practices on how to use Tailwind. This will be done in Oxygen, but you can apply it in other Visual builders or Gutenberg as well. Will will cover how to create an entire design by extending and reusing Tailwind styles. Subscribe and be notified when the next video…

  • Tailwind Design Kits

    Featured Nintu RELIABLE, SCALABLE, CONSISTENT WEB SOLUTIONS.Well crafted premium design kit for Bricks Builder and Winden. Free daisyUI This is quite an interesting addition to this list. You’ll first notice that daisyUI uses a custom – simpler – syntax for its components. In fact, whereas you’d need to write several utilities to style a button…

  • Changelog