Category: Basic

The Style Tab is your code editor for custom CSS and Tailwind configuration. Write CSS or SCSS, and Winden compiles it instantly in your browser. Two Ways to Customize Tailwind Both work together! The Wizard generates design tokens that combine with your Style Tab code. What Makes Winden’s Style Tab Special? 1. Write CSS or SCSS […]

The Config Tab is a fallback option for JavaScript-based Tailwind configuration. We recommend using the Style Tab instead – it supports the modern CSS-based @theme directive which is faster, cleaner, and more maintainable. When to Use Config Tab When to Use Config Tab Only use the Config Tab if you: For everyone else: Use the Wizard (visual) or Style Tab (CSS). JavaScript Config Format The […]

Winden Wizard is an add-on for the Config Tab, allowing you to design configurations with an enhanced UI and instant preview. Options

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 […]

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: […]

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 […]

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 […]

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 […]

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: […]

Reset to Factory Settings Click “Reset to Factory Settings” → Restores all Wizzard tabs to default state. What gets reset: Use when: Starting fresh or fixing broken configurations. Export Current State Export as JSON Click “Export Current State” → Downloads JSON file with all current Wizzard settings. File name: wizzard-backup-[date].json Contains: Import Wizard State Drag & Drop Import In Sidebar: Result: All […]