search ]

How to Install Tailwind CSS in Your WordPress Theme

In this post, we will see how to install and configure Tailwind CSS in WordPress themes. The process is simple, and I think that a simple & short guide that describes the process might be helpful so I decided to write about it. Before we get to the practical part, here are a few words about what Tailwind CSS is…

What is Tailwind CSS?

Tailwind is a CSS framework that streamlines web development by providing a set of pre-built utility classes. This approach allows for rapid styling of elements without the need to write CSS and provides consistency and scalability.

Using Tailwind significantly speeds up development time once you get used to working with it and even helps with site performance as the compilation generates only the necessary CSS lines for your site based on the classes in use.

Tailwind shifts the focus from traditional CSS component usage to functional classes and enables the creation of responsive interfaces (or websites for that matter) with minimal effort.

In practice, Tailwind scans and searches for those classes in all HTML, JavaScript, and PHP files on the site and generates (accordingly) the styles as a static CSS file.

Installation and Configuration of Tailwind CSS in WordPress Themes

Let’s see how to install and configure Tailwind CSS in your WordPress theme…

If you are using your own theme, you can skip straight to the second stage of the guide.

Step 1 – Create a New Template (Optional)

Go to underscores.me and download the template. After downloading, install it on any WordPress site on a local server. Then open the template in your preferred code editor.

Step 2 – Install Tailwind CSS in the WordPress Theme

Now let’s install Tailwind CSS in the theme. Open the terminal, navigate to the root directory of your theme, and run the following commands:

npm install -D tailwindcss
npx tailwindcss init

At the end of the process, you will find that a new file named tailwind.config.js has been created in the theme directory. We need to edit this file and enter the paths to the files that will contain the Tailwind classes in the theme. These paths depend on the structure of your theme, but we’ll show two examples to illustrate how it works.

If we want to use Tailwind classes in the header.php file, for example, and assuming this file is located in the root directory of the theme, then we need to insert the following code into this file:

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./header.php"],
  theme: {
    extend: {},
  },
  plugins: [],
}

A more realistic example would be to include a large number of files at the folder level. Let’s say our theme structure looks like this:

theme_root
│   404.php
│   archive.php
|   comments.php
|   etc...
|    
└───template-parts
│   │   content-none.php
│   │   content-page.php
|   |   etc...

In this case, we will use wildcards to ensure that all files are covered so that using the classes mentioned in these files will lead to the desired result. It would look like this:

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./template-parts/*.{php,html,js}","./*.{php,html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

If you’re defining your Tailwind settings in a configuration file, only the files specified in that Tailwind configuration file will be scanned and affect the generated stylesheet. In the example above, all CSS, JS, and PHP files in the root directory of the theme and in the template-parts directory will be scanned.

Step 3 – Create the Stylesheet

Create a new folder named src in the root directory of the theme. Now create a file named input.css in this folder and insert the following code into it:

@tailwind base;
@tailwind components;
@tailwind utilities;

Return to the terminal and run the following command:

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

This command will create a new folder named dist and a new CSS file named output.css inside it.

Now we need to load this file in our WordPress theme. To do this, go to the functions.php file in the theme directory and insert the following code:

function sv_theme_scripts() {
	wp_enqueue_style( 'output', get_template_directory_uri() . '/dist/output.css', array() );
}
add_action( 'wp_enqueue_scripts', 'sv_theme_scripts' );

If you’d like to read more about adding CSS and JavaScript files to WordPress sites, click on the link: Adding CSS and JavaScript files to WordPress sites.

Start Working with Tailwind

We’ve finished with the setup, and at this stage, you can start using the classes provided by Tailwind. If you look at the site right now, you won’t see anything different because you haven’t added any Tailwind classes to the template files. Go to any element and add the class bg-blue-400.

Please note! Make sure that the following command is still running in the terminal:

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

If you’ve done everything correctly, you’ll notice that the background of the chosen element turns blue. Cool, isn’t it?

Here’s couple of more examples…

Example 1: Responsive Card Layout with Tailwind CSS

<div class="container mx-auto p-4">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="bg-white p-6 rounded-lg shadow-lg">
            <h2 class="text-2xl font-bold mb-2">Card Title 1</h2>
            <p class="text-gray-700">This is a card with some text content. It is styled using Tailwind CSS.</p>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-lg">
            <h2 class="text-2xl font-bold mb-2">Card Title 2</h2>
            <p class="text-gray-700">This is another card with some text content. Tailwind CSS makes it easy to style.</p>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-lg">
            <h2 class="text-2xl font-bold mb-2">Card Title 3</h2>
            <p class="text-gray-700">Yet another card with some text content. This card layout is responsive.</p>
        </div>
    </div>
</div>

Example 2: Centered Hero Section with Tailwind CSS

<div class="bg-blue-500 text-white py-20">
    <div class="container mx-auto text-center">
        <h1 class="text-4xl font-bold mb-4">Welcome to Tailwind CSS</h1>
        <p class="text-lg mb-8">Tailwind CSS is a utility-first CSS framework for rapid UI development.</p>
        <a href="#" class="bg-white text-blue-500 font-semibold py-2 px-4 rounded">Get Started</a>
    </div>
</div>

At this stage, you’re ready to start creating cool WordPress sites using Tailwind CSS. Here’s a site I manage that uses this framework for example. As always, if you have any questions, feel free to ask in the post comments…

Roee Yossef
Roee Yossef

I develop pixel-perfect custom WordPress themes, delivering high-performance, SEO-optimized websites. Have a project in mind? need assistance? Feel free to contact me!

0 Comments...

Leave a Comment

To add code, use the buttons below. For instance, click the PHP button to insert PHP code within the shortcode. If you notice any typos, please let us know!