WindPress Pro brings Tailwind CSS into WordPress

Choose a Tailwind CSS version

WindPress Pro brings Tailwind CSS 3.x or 4.x into WordPress. It starts with a default configuration and requires no setup to begin; you can personalize the configuration 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.

The dashboard uses the WordPress REST API and a modern JavaScript framework. Select the Tailwind CSS version in the add-on settings, then connect an editor or builder integration that fits your process.

Editor utilities depend on the integration

In supported editors, WindPress can suggest class names as you type and provide a picker for theme colors, fonts, and other variables. Some integrations can convert Tailwind CSS HTML to native editor components. Class sorting, hover previews of generated CSS, and a design canvas preview are also available through supported integrations. The floating Ubiquitous Panel offers access to WindPress settings from the page where available.

Connect an editor or builder

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.

Developers can use the API to build custom integrations. Tailwind CSS add-ons can be added in the tailwind.config.js editor. Those plugins load from a CDN, so an internet connection is required to use them; WindPress otherwise works without an internet connection by default.

Generate cached CSS in the browser

WindPress uses caching and can generate the optimized CSS file in the browser without server-side tools. The extension also has a responsive dashboard with a small footprint.

Start using WindPress Pro

Install the plugin in WordPress, open its settings, and select Tailwind CSS 3.x or 4.x. Begin with the default configuration or customize it, then use a supported editor or builder integration to apply classes and its available editing tools.