Category: Winden

  • Installation

  • Introduction

    Tailwind CSS is fantastic, with a small footprint. It works seamlessly for styling themes. However, when it comes to Full Site Editing (FSE) and fine-tuning individual blocks or patterns, you typically need to set up Node.js on your server to extract classes used in blocks and compile them. That was nearly impossible until Winden came…

  • Migrate from TailwindCSS v3 to TailwindCSS v4

    Style Tab To migrate from v3 to v4 we made it so simple for the users. Once you hit save we will reload page and call tailwidncss v4 for you. You can use same steps to switch back. Video to document steps For Tailwind v4 docs please read official docs. Config Tab We fully support…

  • Why Tailwind CSS

    In a world with countless CSS frameworks, Tailwind CSS stands out for its utility-first approach. While traditional frameworks offer pre-defined components that can sometimes limit customization, Tailwind provides the building blocks to create unique, responsive designs quickly. Here’s why Tailwind is gaining traction among developers and why you might consider adopting it for your next…

  • Winden: How does it work?

    Winden provides full integration of TailwindCSS JavaScript for the framework, TailwindCSS configuration, and TailwindCSS styling within visual builder iframes and website front ends. While developing a website, the entire framework is loaded, allowing you to see an instant preview as you add classes to your elements. In addition to framework integration, Winden offers helper functions…

  • Style Tab

    One of the biggest challenges when using a framework is knowing what to do when it doesn’t quite cover everything you need. Tailwind is built to be flexible and customizable from the start, so you can adapt it to fit any project without feeling constrained. CSS Using CSS and @layer When you need to add…

  • Config Tab

    The theme section of your tailwind.config.js file is where you define your project’s color palette, type scale, fonts, breakpoints, border radius values, and more. Keep in mind that the difference between Winden and TailwindCSS config in their documentation they are using: and since Winden is ESM based, we are using:

  • Wizard

    Winden Wizard is an add-on for the Config Tab, allowing you to design configurations with an enhanced UI and instant preview. Options Priority Winden Wizard is a lower-level add-on than the Config Tab. This means that if you set a color in the Wizard, it can be overwritten in the Config Tab. This approach is…

  • Wizard Colors

    Sidebar options Load pressets To get you started fast we prepared tree set of colors for you that you can insert with just a click. Neutrals, Primary, Secondary Include Utility Colors Utility colors are non colors that you need for every project. They are always the same and that is why once included you will…

  • Wizard Font Family

    Sidebar options Load pressets To get you started fast we prepared tree set of font families for you that you can insert with just a click. Preset 1: Title,Body Preset 2: Title,SubTitle, Body Builders Font Families Under the builders integration you will be presented active builders that you can include to fetch the font family…

  • Wizard Font Sizes

    This will give you option to generate font sizes with scale ratio, based on steps you defined. If you do not like scale ratio you can also overwrite values. Sidebar options Disable Fluid By the default we are using fluid scale where we calculate: Everything below minimum screen size will have fixed minimum font size,and…

  • Wizard Spaces

    By default the spacing scale is inherited by the padding, margin, width, minWidth, maxWidth, height, minHeight, maxHeight, gap, inset, space, translate, scrollMargin, and scrollPadding core plugins. This will use exactly the same process and font sizes. The only difference we will be using it for spacing. Until this page is not done you can refer…

  • Wizard Screens

    TailwindCSS framework comes with mobile first logic. In the wizard we are using name Breakpoints to be easier to understand, but in TailwindCSS config and docs it’s named Screens. Breakpoints that you set in wizard will be in pixels. Sidebar options Load presets To get you started fast we prepared tree sets of breakpoints for…

  • Wizard Backup

    From the version 2.4.0 you will be able to migrate Wizard settings between website by exporting .json file. You can import settings by dragging .json file. You can create backups in the database and switch between with a single click pressing load config button. Here is what you can do in the Backups tab: Export…

  • Wizard Settings and Code preview

    Settings Here you can toggle what features you want or do not want to generate the code for the wizard config. Config Preview Here you can see entire preview for the Wizard config. Code is generated on every change and you can preview it without saving the changes.

  • Style Gallery

    Here you will have entire overview of what is changed inside config + wizzard. It is great for holistic overview and also learning purpose. Currently style gallery have: Also those sections also have the links to the official Tailwind CSS docs.

  • Production

    Once you are ready with your website development it’s end of puling robust framework and it’s time replacing it with optimized one. Compile our production ready CSS. All saving and compiling processes are connected to the Save button. Once you complete a setup in Winden and press Save, several tasks are performed: All your styles,…

  • Version 1.x and 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…

  • 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?

  • Class names hook

    If collecting class names from our current integration is not enough, Winden from v2.6.1 have a hook for adding additional class names. The hook system is implemented through WordPress’s filter mechanism using the winden_register_crawlers hook. When Winden collects classes, it calls this hook to gather additional classes from registered crawlers. Code example: Bellow is and example of the plugin that…

  • 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. Suggest more

  • Gutenberg (FSE)

    We have first-class support for Gutenberg, the native page builder for WordPress. All our builders integrations features are disabled by the default and you need to toggle them on. We are having integrations that you can toggle on several places: Plain Classes (Autocomplete) Once enabled you will get autocomplete option with generated classes based on…

  • Bricks Builder

    We have first-class support for Bricks Builder, a powerful page builder for WordPress. All our builders integrations features are disabled by the default and you need to toggle them on. We are having integrations that you can toggle on several places: Plain Classes (Autocomplete) Once enabled you will get autocomplete option with generated classes based…

  • Oxygen Builder

    We have first-class support for Oxygen Builder, a powerful page builder for WordPress. All our builders integrations features are disabled by the default and you need to toggle them on. We are having integrations that you can toggle on several places: Plain Classes (Autocomplete) Once enabled you will get autocomplete option with generated classes based…

  • Font Hero

    Selfhosted Google or Custom fonts to any theme or visual builder made easy Our beautiful plugins with visualised panel lets you easily add self-hosted, static, and variable fonts to any Visual Builder  or WordPress theme without any coding knowledge required. No need to dig into code snippets that need to be maintained with builder updates. The plugin settings are located under Tools and it…

  • Files Scanner

    Besides scanning the database for what classes you have added to the visual builders we have option to scan theme or plugin files as well. This is especially useful if you are creating Gutenberg blocks, Shortcodes or writhing your child theme to add some custom functionalities. To optimise the scanning we have several options: File…

  • 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…

  • 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