Winden provides full integration of Tailwind CSS v4 for WordPress, enabling centralized design token management, real-time CSS compilation, and seamless integration with popular page builders (Gutenberg/FSE, Bricks, Oxygen, Elementor, and more).
Overview
Winden operates in two modes:
- Development Mode
Full browser-based compilation with instant preview as you add classes - Production Mode
Pre-compiled, purged CSS for optimal performance
Browser-Based Compilation
Winden uses Tailwind CSS 4 (the exact bundled version is listed in the changelog), which compiles entirely in the browser. This eliminates the need for Node.js, build tools, or server-side compilation.
How It Works
When you’re developing your website:
- Compiler Loads – The Tailwind v4 browser compiler loads once
- Real-Time Compilation – As you add classes, CSS generates instantly
- LRU Caching – Compilation results are cached to prevent redundant processing
- Instant Preview – See your changes immediately without page refresh
The browser compiler provides:
- Full Tailwind v4 support including the new
@themedirective - SCSS preprocessing (optional)
- Bundled plugins (@tailwindcss/typography, @tailwindcss/forms, container queries)
- CDN plugin loading for third-party plugins (e.g., DaisyUI from esm.run)
No CDN Dependencies
Unlike other solutions, Winden does not rely on external CDNs for core functionality. The Tailwind CSS v4 compiler and official plugins are:
- Bundled with Winden – Tested and shipped as part of the plugin
- No external requests – Works offline, no CDN dependencies
- Version controlled – Guaranteed compatibility with each Winden release
Only third-party plugins (like DaisyUI) are loaded from CDN when you explicitly add them.
CSS-First Configuration
Tailwind v4 uses CSS-first configuration with the @theme directive instead of JavaScript config files:
@theme {
--color-primary: #3b82f6;
--color-secondary: #64748b;
--spacing-lg: 2rem;
--font-family-heading: "Inter", sans-serif;
}
Winden’s Wizard (visual design token builder) generates this @theme configuration automatically from a user-friendly GUI.
JavaScript Config (Legacy Fallback)
For users migrating from older Winden versions or Tailwind v3, Winden provides a Config tab that accepts JavaScript configuration. This serves as a fallback for:
- Legacy plugins that require JavaScript configuration
- Migration path from Tailwind v3 setups
- Advanced use cases not yet supported by CSS-first config
The priority order is:
- Wizard (
@themeCSS) – Highest priority - Config tab (JavaScript) – Fallback when Wizard doesn’t cover your needs
- Style tabs (CSS/SCSS) – Custom styles with
@layerdirectives
For new projects, we recommend using the Wizard and CSS-first configuration.
Design Token Builder (Wizard)
The Wizard provides a visual interface to define your design system:
- Colors – Color palette with automatic shade generation
- Typography – Font sizes with fluid typography (clamp) support
- Font Families – Custom font family definitions
- Spacing – Spacing scale with fluid values
- Border Radius – Border radius scale
- Breakpoints – Custom responsive breakpoints
All changes generate CSS @theme configuration that Tailwind v4 uses for class generation.
Class Discovery & Compilation
Winden discovers classes from multiple sources:
- File Scanning – Scans selected files (PHP, HTML, JS, JSX, TS, TSX, Twig) for class names, or your active theme by default in the Pro file scanner
- Post Save Hook – Extracts classes when you save posts/pages, rendering each one as the current post so shortcodes (ACF, etc.) and dynamic blocks (Query Loop) print their real classes too
- Menus and Widgets – Menu item CSS classes and classic/block widgets are crawled, and a save of either triggers a recrawl
- Page Builder Integration – Hooks into Bricks, Oxygen, Elementor, Gutenberg to detect classes in real-time
- Real-Time Detection – Monitors editor changes and compiles on-the-fly
Every save inside a builder editor always recompiles output.css, whatever the "Disable Dev Mode" setting says.
If content changes outside a builder — a scheduled post going live, a menu or widget update elsewhere — Winden catches up the next time a builder editor or the Winden admin opens, or the next time an admin visits a frontend page.
Compilation Flow
User adds class → Class detected → Compiler generates CSS → Styles applied instantly
During compilation:
- Your
@themeconfiguration (from Wizard) is processed - Style tabs are combined with
@layerdirectives - All discovered classes are compiled to CSS
- Result is cached for performance
Production Mode
For production sites, Winden provides optimized CSS delivery:
Pre-Compiled CSS
When you save in the Winden admin:
- All classes are collected from scanned files and content
- CSS is compiled and purged (only used classes)
- Result is saved as
output.css(typically 10-50KB for entire site) - Frontend loads this single, optimized CSS file
Benefits
- No JavaScript overhead – Compiler doesn’t load on frontend
- No FOUC – CSS is ready immediately (no flash of unstyled content)
- Better performance – Smaller payload, faster page loads
- Higher Lighthouse scores – No render-blocking compilation
Real-Time Cross-Tab Synchronization
Winden uses the BroadcastChannel API to sync changes across all open tabs:
- You edit styles in the Winden admin
- Click Save
- All open tabs (frontend, editors, other admin tabs) receive the update
- CSS updates instantly without page refresh
This enables a powerful workflow:
- Edit in one tab, preview in another
- See changes on frontend immediately
- Works with page builder editors too
Page Builder Integration
Winden integrates with popular page builders:
- Gutenberg/FSE – Full Site Editor support
- Bricks Builder – v1 and v2 support
- Oxygen Builder – Classic and v6 support
- Elementor – Visual builder integration
Each integration provides:
- Autocomplete suggestions for Tailwind classes
- Real-time preview in the builder
- Class detection for compilation
Autocomplete System
When editing in page builders, Winden provides intelligent autocomplete:
- Tailwind Classes – All default and custom utilities
- Custom Classes – From your
@layerdefinitions - Design Tokens – CSS custom properties from Wizard
- Scanned Classes – Classes discovered from file scanning
Autocomplete uses Monaco Editor (same as VS Code) for a premium editing experience.
Plugin Support
Bundled Plugins (No CDN call is needed)
Winden ships with official Tailwind plugins bundled and tested:
@tailwindcss/typography– Prose styling for content@tailwindcss/forms– Form element styling
Container queries (@container, @sm:, @min-[400px]:) are built into Tailwind v4 – no plugin needed.
An old @plugin "@tailwindcss/container-queries"; line still compiles but does nothing and can be removed.
These plugins are included in the Winden package – no external CDN requests required.
Third-Party Plugins (CDN)
You can load additional plugins from CDN when needed:
`@plugin "https://esm.run/daisyui@5";`
Third-party plugins are fetched and cached on first use.
Performance Optimizations
Winden implements several optimizations:
- LRU Caching – Compilation results cached to prevent redundant work
- FNV-1a Hashing – Fast hash function for cache keys
- Design System Caching – Tailwind design system cached across compilations
- Blob URL Management – Proper cleanup prevents memory leaks
- Debounced Updates – Prevents excessive recompilation during rapid editing
Summary
| Feature | Development | Production |
|---|---|---|
| Compiler | Browser-based | Pre-compiled |
| Extra JavaScript | Tailwind compiler (~600 KB) for logged-in users | None, only output.css |
| Performance | Instant preview | Optimized delivery |
| FOUC | Only for classes not yet in output.css | None |
| Real-time sync on the frontend | Yes (logged-in users) | No, visitors get output.css |
| Builder editors | Live preview, compile on save | Live preview, compile on save |