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

Rosua

Joshua Gugun Siagian

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.

leeshadle

Draft – Tailwind CSS for WordPress.

Add Tailwind CSS to WordPress, in seconds.

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>


Alternatives to Pilo'Press

Top alternatives