WindPress Pro connects Tailwind CSS 3.x and 4.x with WordPress. Start with the default configuration without setup, then personalize it for your project. WindPress works with any WordPress theme, though you may need to adjust the compiler scanner to detect classes used in the theme.

How editor tools work together

Available tools depend on the integration. Depending on the integration, class suggestions can appear as you type, and a variable picker can let you choose theme colors, fonts, and other variables. Supported integrations can convert Tailwind CSS HTML into native editor elements and sort classes in the input field. Where available, hover over a class to view its generated CSS and a design canvas preview. Where available, the floating Ubiquitous Panel gives you access to WindPress options from the page.

Editor and builder integrations

Listed integrations include Gutenberg and the Block Editor, GreenShift, Kadence, WP LiveCanvas, and Timber. WindPress Pro integrations include Blockstudio, Breakdance, Bricks, Builderius, Etch, Meta Box Views, Oxygen 6 and Classic, and WPCodeBox 2. Elementor, Divi, Pinegrow, and Zion Builder are listed as planned or in progress.

Configuration and CSS generation

The dashboard uses the WordPress REST API and a modern JavaScript framework. Tailwind CSS plugins can be added in the tailwind.config.js file; loading those add-ons requires an internet connection. WindPress does not require an internet connection by default. Its cache workflow generates the final optimized CSS in the browser without server-side tools.

First use

1. Install WindPress Pro in WordPress and open its settings from the plugin interface or floating panel.
2. Choose a Tailwind CSS version and customize the default configuration as needed.
3. Connect the editor or builder integration you plan to use.
4. Use the available class suggestions, variable picker, previews, sorting tools, and configuration while designing.