Installing Tailwind CSS in WordPress themes

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 command npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch is still running in the terminal. If you’ve done everything correctly, you’ll notice that the background of the chosen element turns blue. Cool, isn’t it?

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…