Rosua

Joshua Gugun Siagian

<h3>WindPress: the only Tailwind CSS v3 and v4 integration plugin for WordPress.</h3>
<p>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.</p>
<p><strong>Tailwind CSS version</strong>:<br />
– 3.4.17<br />
– 4.1.16</p>
<h3>Features</h3>
<p>WindPress is packed full of features designed to streamline your workflow. Some of our favorites are:</p>
<ul>
<li><strong>Dual Tailwind CSS version</strong>: Tailwind CSS <code>3.x</code> and <code>4.x</code> ready.</li>
<li><strong>Plug and play</strong>: Start using Tailwind CSS in WordPress in seconds — no setup is required.</li>
<li><strong>Customizable Configuration</strong>: The plugin comes with a default Tailwind CSS configuration, but you can easily customize it to fit your needs.</li>
<li><strong>Easy to use</strong>: Simplified and intuitive settings to get you up and running quickly.</li>
<li><strong>Lightweight</strong>: 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><strong>Blazingly fast</strong>: 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>
<p>And some specific integrations also include the following features:</p>
<ul>
<li><strong>Autocompletion</strong>: As you type, Tailwind CSS class names will be suggested automatically.</li>
<li><strong>Variable Picker</strong>: Easily select Tailwind CSS themes’ colors, fonts, and other variables from a panel.</li>
<li><strong>HTML to native elements</strong>: Convert Tailwind CSS HTML to native elements in the editor.</li>
<li><strong>Sort the classes</strong>: Sort the Tailwind CSS classes on the input field.</li>
<li><strong>Hover Preview the classes</strong>: Hover over the classes to see the complete outputted CSS and the preview of the design canvas.</li>
<li><strong>Ubiquitous Panel</strong>: A floating panel that allows you to quickly access the WindPress settings from anywhere on the page.</li>
</ul>
<p>Visit <a href="https://wind.press" rel="nofollow ugc">our website</a> for more information.</p>
<h3>Seamless Integration</h3>
<p>It’s easy to build design with Tailwind CSS thanks to the seamless integration with the most popular visual/page builders:</p>
<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> — <strong>Pro</strong></li>
<li><a href="https://breakdance.com/ref/165/" rel="nofollow ugc">Breakdance</a> — <strong>Pro</strong></li>
<li><a href="https://bricksbuilder.io/" rel="nofollow ugc">Bricks</a> — <strong>Pro</strong></li>
<li><a href="https://builderius.io/?referral=afdfca82c8" rel="nofollow ugc">Builderius</a> — <strong>Pro</strong></li>
<li><a href="https://etchwp.com/" rel="nofollow ugc">Etch</a> — <strong>Pro</strong></li>
<li><a href="https://metabox.sjv.io/OeOeZr" rel="nofollow ugc">Meta Box Views</a> — <strong>Pro</strong></li>
<li><a href="https://oxygenbuilder.com/ref/12/" rel="nofollow ugc">Oxygen 6 / Classic</a> — <strong>Pro</strong></li>
<li><a href="https://wpcodebox.com/?ref=185" rel="nofollow ugc">WPCodeBox 2</a> — <strong>Pro</strong></li>
</ul>
<p>Planned / In Progress</p>
<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>
<p>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.</p>
<h3>Bring Your Own Integration</h3>
<p>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.<br />
Check out our detailed <a href="https://wind.press/docs/integrations/custom-theme" rel="nofollow ugc">guide</a> to get started.</p>
<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>
<p>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.</p>


WindPress – Tailwind CSS integration for WordPress

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

Pilot'in

<p>Pilo’Press is a framework plugin for WordPress. Based on ACF and ACF Extended, it allows you to create layouts among other things and use the Flexible Content field as a page builder.</p>
<p>Pilo’Press uses Tailwind CSS for style templating which can be setup and build directly from the back-office.<br />
Please note that Tailwind CSS is not mandatory, you can choose to use it or not.</p>
<h3>Requirements</h3>
<p>This plugin requires <a href="https://www.advancedcustomfields.com/pro/" rel="nofollow ugc">Advanced Custom Fields PRO</a> and <a href="https://wordpress.org/plugins/acf-extended/" rel="ugc">Advanced Custom Fields: Extended</a> plugins in order to work correctly.</p>
<h3>Getting started</h3>
<ol>
<li>Activate Advanced Custom Fields Pro plugin</li>
<li>Activate ACF Extended plugin</li>
<li>Activate Pilo’Press plugin</li>
<li>In your theme, create a <code>pilopress</code> folder</li>
<li>Within the <code>pilopress</code> folder, create <code>layouts</code> subfolder</li>
<li>Within the <code>pilopress</code> folder, create <code>assets</code> subfolder</li>
<li>
<p>In the <code>index.php</code> file, add the following code:</p>
<pre><code><?php

get_header();

    the_pip_content();

get_footer();
</code></pre>
</li>
</ol>
<h3>Tailwind CSS</h3>
<p>In the administration, under <code>Pilo'Press > Styles</code>, when you click on “Update & Compile”, TailwindCSS will be compiled remotely using <a href="https://www.tailwindapi.com/" rel="nofollow ugc">TailwindAPI</a>. Minified CSS files are then created under <code>/pilopress/assets/styles.min.css</code> and <code>/pilopress/assets/styles-admin.min.css</code>.</p>
<p>You can manually enqueue those files in your theme for the front-end & the back-end, but we recommend to use automatic enqueue code above.</p>
<p>It is possible to manually retrieve the Tailwind PostCSS & JS fields of the administration if you want to build TailwindCSS locally. To do so, you can use the following code:</p>
<pre><code>$tailwind_css = get_field( 'pip_tailwind_style', 'pip_styles_tailwind' );
$tailwind_config = get_field( 'pip_tailwind_config', 'pip_styles_tailwind' );
</code></pre>
<p>For more details, see <a href="https://tailwindcss.com/docs/installation/" rel="nofollow ugc">Tailwind CSS Documentation</a>.</p>
<h3>Customizing style</h3>
<p>To customize default Tailwind CSS styles, go to <code>Pilo'Press > Styles</code> from left navigation menu or top bar menu.</p>
<p>For more details about customization, see <a href="https://pilot-in.github.io/PiloPress/docs/customizing-styles/" rel="nofollow ugc">Github Page</a>.</p>
<h3>Add new layout</h3>
<ul>
<li>In the admin menu <code>Pilo'Press > Layouts</code>, add a new layout</li>
<li>Configure the layouts fields</li>
<li>Create PHP, CSS and JS files in your theme layout folder <code>/your-theme/pilopress/layouts/your-layout</code></li>
<li>You have to name those files the same way you did in back-office settings</li>
</ul>
<p>Note: only PHP template file is require.</p>
<h3>Templating</h3>
<p>To display the content of your post, you have to use the following function:</p>
<pre><code>// Pilo'Press content (doesn't need 'echo')
the_pip_content();

// Pilo'Press content (needs 'echo')
echo get_pip_content();
</code></pre>
<h3>Components</h3>
<p>See <a href="https://pilot-in.github.io/PiloPress/docs/components/" rel="nofollow ugc">GitHub Page</a> for complete example.</p>
<h3>Hooks</h3>
<p>Available hooks are list and describe in <a href="https://pilot-in.github.io/PiloPress/docs/hooks/" rel="nofollow ugc">GitHub Page</a></p>


Pilo'Press

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

WindPress – Tailwind CSS integration for WordPress vs Pilo'Press