Tailwind CSS versions and configuration
WindPress Pro brings Tailwind CSS 3.x and 4.x into WordPress. It starts with a default Tailwind CSS configuration that you can customize for a project, and its simplified settings let you choose the Tailwind version. The plugin works with any WordPress theme, though the compiler scanner may need a small adjustment to detect classes used in a theme.
Tools available in supported editors
Depending on the editor integration, WindPress can suggest class names as you type, let you pick theme colors, fonts, and other variables from a panel, and sort classes in the input field. It can also convert Tailwind CSS HTML to native editor elements. Hover over a class to see its generated CSS and a design canvas preview. The floating Ubiquitous Panel gives you access to WindPress settings from the page.
Editor and builder integrations
The listed integrations include Gutenberg and the Block Editor, GreenShift, Kadence, WP LiveCanvas, and Timber. Integrations marked Pro 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.
WindPress provides an API for developers to build custom integrations. Tailwind CSS plugins can be added in tailwind.config.js. An internet connection is needed to load plugins from a CDN; by default, WindPress does not require an internet connection.
CSS generation and theme compatibility
WindPress uses caching and can generate the final optimized CSS file in the browser without server-side tools. Its dashboard uses the WordPress REST API and a JavaScript framework.
Getting started
Install WindPress Pro in WordPress, then open its settings from the plugin interface or floating panel. Start with the default configuration and customize it as needed. Select the Tailwind CSS version, connect a relevant editor or builder integration, and use the available class suggestions, variable picker, previews, and sorting tools as you work.