Design WordPress using the Tailwind CSS framework

What is Tailwind Framework?

Tailwind CSS is a framework for the CSS language that has recently become very popular. This practical CSS framework was designed and developed by Adam Wathan. With the help of Tailwind, you can design beautiful pages and designs in a fully responsive and responsive way without adding even a single line of CSS code! and using its ready-made classes.

The main difference between Tailwind CSS and other frameworks such as Bootstrap is that after you finish designing, it generates a CSS output file based on the classes you’ve used and removes the additional framework code that you have not used, resulting in a Smaller & Cleaner output file!.

Why should we use Tailwind?!

As mentioned in the previous section, this framework, with the help of its updated and modern system, removes extra classes that are not used by you in the final output file, making the main CSS file smaller and optimizing your design. Unlike Bootstrap, which adds a static and unoptimized CSS file, Tailwind is designed to be completely dynamic and has much more acceptable performance in modern browsers.

Tailwind css also supports most modern features such as dark/light mode and its fully Responsive based.

Tailwind is designed to reduce your repetetive css codes and can support your custom Components to speed up your design procedure!.

Using Tailwind in WordPress

To use Tailwind in WordPress, you can simply insert the JS script of this framework into the Head tag of your site using the wp_head action hook. First, we will enter the main Tailwind site at https://tailwindcss.com and enter the framework installation section at https://tailwindcss.com/docs/installation/play-cdn:

And we copy the CDN section codes as shown in the image below:

The code above is actually a Script tag that is addressed as a CDN:

<script src=”https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4″></script>

In the final step, we just need to add this tag to the Head section of our WordPress site using a piece of PHP code:

PHP Code Snippet:

<?php
add_action('wp_head', function(){

 ?>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4" id="my-test-tailwind-cdn"></script>
 <?php

});

Note: To add this code snippet, you can use third-party plugins such as Code Snippets, or you can also add it directly into the functions.php file of your active theme or child theme.

free download code-snippets plugin

Test result after adding the above code:

Disadvantages of this method:

The above method for installing Tailwind is a completely non-optimal and hands-on method (for testing and practice only). In this method, every time the page is loaded, all the HTML code of the page is checked by the Tailwind JS file and its used classes are added to the page as an inline Style tag, which may cause page slowdown or other problems.

Also, in this method, we are not able to use all the professional features of the framework, such as components, etc., and we have high limitations.

in this method the editing pre-view may not work in some page-builders like Gutenberg, and this makes your design process harder and slower.

The best way to install Tailwind Framework on WordPress

In order to use Tailwind in WordPress in a more professional and optimized way, we can use a very lightweight and optimized helper plugin. The plugin we recommend is a completely free plugin from the WordPress repository that you can download and install via the link below:

https://wordpress.org/plugins/taily

The Taily plugin is a very lightweight plugin that manages and optimizes the Tailwind framework on your WordPress site. With its productive mode feature, this plugin can completely cover the disadvantages of the previously explained methods. Other features of this plugin can be seen in the list below:

• Framework version control (version 3 or 4)

• Support for all framework features (Theme Variables & Components)

• Control of WordPress post types

• Having a production mode (output mode)

• Final compression of generated CSS codes

• Adding CSS codes to pages as an external file (External CSS File)

• Compatible with WordPress cache plugins such as WP-Rocket and Lightspeed Cache & etc…

• Supports template post types such as WordPress products (Template Post Types)

• Supports template taxonomies such as (woocommerce product cat)

• Compatible with most popular WordPress page builders (Divi Builder, WPBackery, Bricks Builder, etc)

• Professional support for Gutenberg and Elementor page builders

• Professional settings

Using the Taily plugin

After installing and activating this plugin, go to the settings page and select the Tailwind framework version. We recommend always selecting and using the latest version of this framework. After selecting the version, save the settings and start designing! It’s that simple!!

You can see how to use this plugin in the images below:

The Taily plugin adds a very useful field to the Elementor and Gutenberg WordPress page builders where you can easily write and style your CSS classes without any space restrictions. Also, the Gutenberg and Elementor support features can be easily disabled in the plugin settings page.

Supports all framework features (Theme Variables & Components)

With the Tailwind plugin, all the features of Tailwind are available to you and you can design with the maximum power of this framework. With the help of different layers (@Layers) of Tailwind, you can customize this framework to suit your needs! For example, you can add your own additional colors to Tailwind or define a dedicated component to avoid repeating Tailwind codes and CSS classes.

Controlling WordPress post types

In the Post Types section, you can specify which WordPress post types on your site will use the Tailwind framework. By default, Tailwind only works and is added to WordPress pages and WordPress posts. This feature allows you to use Tailwind CSS with more flexibility and optimization within your WordPress site, and simply don’t add Tailwind anywhere you don’t want it!

Productive Mode

After completing the design of any page, page, or template (such as a WooCommerce product), you can enable its production mode so that CSS codes are added in a much more efficient way and there is no need for additional JS processing on the pages! You can also enable/disable production mode from within the Elementor page builder editor.

After completing the design, you can easily edit your design any time you need to, disable the plugin’s production mode on the page or design in question, and continue editing so that new CSS codes and classes are easily updated.

Adding CSS codes to pages as external files

In the advanced section of the plugin settings, you can choose how to add CSS codes to pages. There are 2 modes available in this section:

• Default mode (inline)

• As an external CSS file (more optimized mode)

Keep in mind that the external CSS file mode is much more optimized and standardized, has better compatibility with caching plugins, and is highly recommended for high performance.

Supports template-type post types such as WordPress products

For post types that are repeated frequently on your site and have a template, such as WooCommerce products or WordPress posts, you can specify that only 1 CSS file be generated for all pages of that post type to save server space and prevent the generation of duplicate code and files.

You can also set a template mode for WordPress customizations such as WooCommerce product categories, etc., so that a single CSS output file is generated for all pages in that category!

Note: Enabling and disabling the production mode of this type of post type or WordPress customization can be changed on this page (Taily Settings, Advanced section), and there is no need to enable or disable production mode on individual products or categories.

Other professional settings

In the advanced section of the Taily settings, you can also find the following helpful items:

• Clear all generated CSS files

• Convert all to production mode

• Convert all to non-production mode

• Switch to editing mode (non-production) when editing a post

• Add Tailywind JS file locally

• Cache plugin compatibility option

Clear all generated CSS files

This option deletes all CSS files generated by this plugin at once and is very useful for resetting CSS files. Use this option only when the CSS generation type is set to external files.

Put everything in production mode

By clicking this button, all posts, pages, and taxonomies designed by the Taily plugin will go into production mode and their CSS codes will be added in a more optimized way. Use this option when your design is completely finished!

Put everything in non-productive mode

By clicking this button, all posts, pages, and taxonomies designed by the Taily plugin will go into non-production mode (Development Mode) and their CSS codes will be added by default (in the form of JS files and additional processing). Use this option when you need to edit your overall design!

Going into edit mode (non-production) when editing a post

By enabling this helpful option, whenever you edit a page or post, the production mode of that post will automatically be disabled and ready for editing, saving you valuable time.

Adding Tailwind JS file locally

If your site cannot communicate with the Tailywind CDN servers quickly and is experiencing slowness, enable this option to add Tailywind JS files locally (called from within the Taily plugin itself) to the pages and avoid slowness and reduced page loading speed!

Cache plugin compatibility option

If you use caching plugins like Rocket, be sure to enable this option so that you don’t experience any disruptions or problems when changing the post generation mode and the Taily plugin works well and as standard.

Design and development WordPress themes using the Taily plugin!

The Taily plugin is completely free, and you can use it to design your own template or even a WordPress template for sale in various markets, and leave the management of CSS codes and template styling completely to the powerful Taily plugin!

By using this method in your design and development process, you can achieve amazing operational speed and deliver a completely standard layout based on the popular Tailwind CSS framework.

This plugin also has 2 WordPress Filter Hooks that you can use to inject your theme settings into the plugin settings and use your own custom components and variables:

• taily_settings_beforeprint_jsconfs

• taily_settings_beforeprint_cssconfs

For more guidance and documentation on using the above filter-hooks, you can contact us through this page.

Final summary

Nowadays, using different frameworks in website design and development has become very trendy and fashionable. Using frameworks significantly increases your design speed and provides a framework for your design. Using Tailwind in WordPress may seem difficult and has many challenges, But the free and useful Tailwind plugin is here to minimize these challenges for you and create an amazing experience in your design process on the WordPress CMS!