Plain Classes This is the current stable integration approach. We use tags because most visual builders rely on tag-based class handling, which allows us to easily integrate different builders by mapping class names or injecting utility classes into each builder’s global class system. This approach does come with some limitations. For example, editing utility classes […]
Read MoreAuthor: devusrmk
Flowbite
If you love the clean, “utility-first” approach of Tailwind CSS — but find yourself repeatedly recreating common user-interface pieces like buttons, modals, navbars or dropdowns — Flowbite might just be the tool you’ve been waiting for. Flowbite bundles a large collection of ready-made, stylish, and responsive UI components built with Tailwind, so instead of spending […]
Read MoreDaisyUI
DaisyUI is becoming one of the most popular add-ons for TailwindCSS — and for a good reason. It takes the power of Tailwind’s utility classes and turns them into simple, beautiful, ready-to-use components. Buttons, cards, alerts, forms, modals… everything is already styled, consistent, and theme-ready. Instead of spending hours piecing together utilities for every button […]
Read MoreMigration from Pre-Winden 2.9
Winden before 2.9.0 with Tailwind 4 If you are updating from Winden version smaller then v2.9.0 and you are using Tailwind v4 you do not need to do anything. Winden before 2.9.0 with Tailwind 3 If you are updating from Winden version smaller then v2.9.0 and you are using Tailwind v3 you will be prompted […]
Read MoreColors Wizard
Build Color Systems Fast Pick a color → Get 10 perfect shades automatically. Start Fresh or Load Preset When you activate Colors, you start with a clean slate – no default colors. Quick Start: Load Preset Click “Load Preset” → Get 3 colors instantly: Result: 33 color utilities instantly. Three Ways to Add Colors 1. Add Color Manually Result: brand-50 through brand-950 ready to […]
Read MoreFont Sizes Wizard
Wizard Mode (Auto-Calculated) The wizard automatically calculates all font sizes based on mathematical ratios. Min & Max Values Base Font Size (Min & Max): Screen Sizes (Min & Max): Aspect Ratio Controls how font sizes grow between steps. Common Ratios: Min vs Max Ratio: Example: Steps Number of Steps: How many font sizes in your scale (default: […]
Read MoreSpaces Wizard
Visual controls generate perfect spacing scales automatically. Structure Overview Spacing follows the same structure as Font Sizes: Key Differences from Font Sizes 1. Utility Values Click “Add Utility Spacing” → Adds: Use cases: 2. Builder Integration Note: Most visual builders don’t have spacing systems to import (unlike font sizes). You cannot fetch spacing from Gutenberg/Bricks/Oxygen. Define your spacing […]
Read MoreBorder Radius Wizard
Visual controls generate perfect border radius scales automatically. Structure Overview Border Radius follows the same structure as Font Sizes: Key Differences from Font Sizes 1. Utility Values Click “Add Utility Radius” → Adds: 2. Builder Integration Note: Most visual builders don’t have border radius systems to import (unlike font sizes). You cannot fetch border radius from Gutenberg/Bricks/Oxygen. Define […]
Read MoreFont Family Wizard
Add custom fonts with visual controls. Start Fresh or Load Preset When you activate Font Family, you start with a clean slate – no default fonts. Quick Start: Load Preset Click “Load Preset” → Choose from 2 options: Preset 1: System Fonts Preset 2: Google Fonts Add Font Family Each font requires name and value: Font Value Examples System fonts: Google Fonts: Custom […]
Read MoreBreakpoints Wizard
Define custom breakpoints with visual controls. Load Preset Quick Start: Load Preset Click “Load Preset” → Choose from 3 preset options: Preset 1: mob, tab, desk Name Value Device mob 768px Mobile tab 1024px Tablet desk 1440px Desktop Preset 2: mobile, tablet, desktop Name Value Device mobile 768px Mobile tablet 1024px Tablet desktop 1440px Desktop Preset 3: […]
Read More