Integrate Tailwind CSS 3 or 4 into WordPress easily, in seconds. Works well with the block editor, page builders, plugins, themes, and custom code.

leeshadle

Draft – Tailwind CSS for WordPress.

Add Tailwind CSS to WordPress, in seconds.

Pilot'in

Pilo'Press

The most advanced WordPress Page Builder using Advanced Custom Fields & TailwindCSS.

Rosua

Joshua Gugun Siagian

<h3>WindPress: the only Tailwind CSS v3 and v4 integration plugin for WordPress.</h3>
WindPress is a platform agnostic <a href="https://tailwindcss.com/" rel="nofollow ugc">Tailwind CSS</a> integration plugin for WordPress that allows you to use the full power of Tailwind CSS within the WordPress ecosystem.
Tailwind CSS version: 
– 3.4.17 
– 4.1.16
<h3>Features</h3>
WindPress is packed full of features designed to streamline your workflow. Some of our favorites are:
<ul>
<li>Dual Tailwind CSS version: Tailwind CSS <code>3.x</code> and <code>4.x</code> ready.</li>
<li>Plug and play: Start using Tailwind CSS in WordPress in seconds — no setup is required.</li>
<li>Customizable Configuration: The plugin comes with a default Tailwind CSS configuration, but you can easily customize it to fit your needs.</li>
<li>Easy to use: Simplified and intuitive settings to get you up and running quickly.</li>
<li>Lightweight: The plugin dashboard built on top of WordPress REST API, and a modern JavaScript framework for an instant, responsive user experience. Yet it has a small footprint and won’t slow down your site.</li>
<li>Blazingly fast: Cache makes your WordPress site blazing fast. Generate the final optimized CSS file in the browser without server-side tools. None of your data is transferred over the network.</li>
</ul>
And some specific integrations also include the following features:
<ul>
<li>Autocompletion: As you type, Tailwind CSS class names will be suggested automatically.</li>
<li>Variable Picker: Easily select Tailwind CSS themes’ colors, fonts, and other variables from a panel.</li>
<li>HTML to native elements: Convert Tailwind CSS HTML to native elements in the editor.</li>
<li>Sort the classes: Sort the Tailwind CSS classes on the input field.</li>
<li>Hover Preview the classes: Hover over the classes to see the complete outputted CSS and the preview of the design canvas.</li>
<li>Ubiquitous Panel: A floating panel that allows you to quickly access the WindPress settings from anywhere on the page.</li>
</ul>
Visit <a href="https://wind.press" rel="nofollow ugc">our website</a> for more information.
<h3>Seamless Integration</h3>
It’s easy to build design with Tailwind CSS thanks to the seamless integration with the most popular visual/page builders:
<ul>
<li><a href="https://wordpress.org/gutenberg" rel="ugc">Gutenberg</a> / Block Editor</li>
<li><a href="https://shop.greenshiftwp.com/?from=3679" rel="nofollow ugc">GreenShift</a></li>
<li><a href="https://kadencewp.com" rel="nofollow ugc">Kadence WP</a></li>
<li><a href="https://livecanvas.com/?ref=4008" rel="nofollow ugc">LiveCanvas</a></li>
<li><a href="https://upstatement.com/timber/" rel="nofollow ugc">Timber</a></li>
<li><a href="https://blockstudio.dev/?ref=7" rel="nofollow ugc">Blockstudio</a> — Pro</li>
<li><a href="https://breakdance.com/ref/165/" rel="nofollow ugc">Breakdance</a> — Pro</li>
<li><a href="https://bricksbuilder.io/" rel="nofollow ugc">Bricks</a> — Pro</li>
<li><a href="https://builderius.io/?referral=afdfca82c8" rel="nofollow ugc">Builderius</a> — Pro</li>
<li><a href="https://etchwp.com/" rel="nofollow ugc">Etch</a> — Pro</li>
<li><a href="https://metabox.sjv.io/OeOeZr" rel="nofollow ugc">Meta Box Views</a> — Pro</li>
<li><a href="https://oxygenbuilder.com/ref/12/" rel="nofollow ugc">Oxygen 6 / Classic</a> — Pro</li>
<li><a href="https://wpcodebox.com/?ref=185" rel="nofollow ugc">WPCodeBox 2</a> — Pro</li>
</ul>
Planned / In Progress
<ul>
<li><a href="https://be.elementor.com/visit/?bta=209150&brand=elementor" rel="nofollow ugc">Elementor</a></li>
<li><a href="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=47622" rel="nofollow ugc">Divi</a></li>
<li><a href="https://pinegrow.com/wordpress" rel="nofollow ugc">Pinegrow</a></li>
<li><a href="https://zionbuilder.io/" rel="nofollow ugc">Zion Builder</a></li>
</ul>
Note: The core feature will remain available on all versions, but some integrations may be added or removed from the free version in the future.
<h3>Bring Your Own Integration</h3>
WindPress is designed to be easily extensible, so you can build your integrations with Tailwind CSS. The plugin provides a simple API for adding integrations. 
Check out our detailed <a href="https://wind.press/docs/integrations/custom-theme" rel="nofollow ugc">guide</a> to get started.
<h4>Love WindPress?</h4>
<ul>
<li>Give a <a href="https://wordpress.org/support/plugin/windpress/reviews/?filter=5/#new-post" rel="ugc">5-star review</a></li>
<li>Purchase the <a href="https://wind.press" rel="nofollow ugc">Pro version</a></li>
<li>Join our <a href="https://www.facebook.com/groups/1142662969627943" rel="nofollow ugc">Facebook Group</a></li>
<li>Sponsor us on <a href="https://github.com/sponsors/suasgn" rel="nofollow ugc">GitHub</a> or <a href="https://ko-fi.com/Q5Q75XSF7" rel="nofollow ugc">Ko-fi</a></li>
</ul>
<h4>Credits</h4>
<ul>
<li>Image by <a href="https://www.flaticon.com/free-icon/wind_727964" rel="nofollow ugc">Pixel perfect</a> on Flaticon</li>
</ul>
Affiliate Disclosure: This readme.txt may contain affiliate links. If you decide to make a purchase through these links, we may earn a commission at no extra cost to you.

Alternatives to WindPress – Tailwind CSS integration for WordPress

Top alternatives