Savvy / Blog / WordPress Development / How to Install Tailwind CSS in Your WordPress Theme

How to Install Tailwind CSS in Your WordPress Theme

By Roee Yossef •Updated on Dec 6, 2024 • 1 Comment

This guide will walk you through installing and configuring Tailwind CSS in WordPress themes. The process is straightforward, so I’ve put together a concise guide to help you get started. But before diving into the steps, let’s briefly explore what Tailwind CSS is all about.

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.

Prerequisites

Before we begin, make sure you meet the following requirements:

Code Editor: Use a code editor like VS Code to edit theme files and configuration files.
Basic Command Line Knowledge: Familiarity with running commands in the terminal.

Installation and Configuration of Tailwind CSS in WordPress Themes

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

Step 1 – Install Node.js

Node.js is required to run Tailwind CSS, as it relies on Node.js to process your CSS.

If Node.js is already installed on your system, you can skip this step and proceed to the next one. Verify your installation by running node -v and npm -v in the terminal.

For macOS and Linux:

Install Node Version Manager (nvm) by running this command in your terminal:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

Restart your terminal or run:
```
source ~/.nvm/nvm.sh
```
Install Node.js LTS (Long-Term Support) using nvm:
```
nvm install --lts
```
Verify the installation:
```
node -v
npm -v
```
You should see the versions of Node.js and npm printed in the terminal.

For Windows:

Download the LTS version of Node.js from the official Node.js website.
Run the installer and follow the instructions.
After installation, open Command Prompt and verify the installation:
```
node -v
npm -v
```
This will print the installed versions of Node.js and npm.

Troubleshooting:

If you encounter issues with the Node.js installation, check your system’s PATH environment variable to ensure it includes the directory for Node.js binaries.
For macOS/Linux users, if the nvm command is not recognized, ensure it is sourced in your shell’s configuration file (~/.bashrc or ~/.zshrc).

Once Node.js and npm are installed, proceed to the next steps to install Tailwind CSS and set up your environment.

Step 2 – Create a New Theme (Optional)

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

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 3 – 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

Ensure that Node.js and npm are installed on your system. You can download them from https://nodejs.org/. Test your installation by running node -v and npm -v in the terminal.

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: [],
}

Troubleshooting Common Issues

Error: Tailwind CSS command not found: Verify that Node.js and npm are installed correctly by running node -v and npm -v.
Styles not updating: Ensure that the npx tailwindcss --watch command is running while making changes.
Theme file paths not working: Double-check that the paths in tailwind.config.js match your theme structure.

Step 4 – 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;

The --watch flag ensures that Tailwind recompiles your CSS file automatically when you make changes to the input.css file.

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.

Step 5 – Integrate the CSS in WordPress

To load this file in your WordPress theme, 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' );

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.

Remember to 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 a 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…