Install Tailwindcss in WordPress theme

How to install and setup Tailwindcss in your WordPress theme

In this post we are going to look at how to setup tailwindcss in your WordPress theme. This is an extremely easy process but for some reason there aren’t any decent setup guides for WordPress out there. Follow along in the video below, all the code required can be found below the video!

Step 1: Create a new theme (optional)

If you already have a theme setup, move on to step 2. If you don’t have your own theme already setup, follow these quick steps.

Download a starter theme

Head to underscores.me and download a starter theme. Once this you have downloaded the starter theme, install it on your local WordPress installation. Open the theme in your code editor and you are ready to get started.

Step 2: Install tailwindcss in our WordPress theme

Now we are ready to install tailwindcss in our WordPress theme! Head over to the tailwindcss installation page, we are going to be following the instructions found here.

Don’t be scared of the terminal!

In the terminal, navigate to the root folder of your WordPress theme. Run the following commands:

npm install -D tailwindcss
npx tailwindcss init

You will now see a new file in your theme’s directory called tailwind.config.js. We need to edit this file, this bit is important and where most people go wrong. We need to enter the paths to the files that will contain tailwind classes in our theme. This will depend on the structure of our theme, but the I will put 2 examples below to help you understand what you need to put.

If we just want to use tailwind classes in our header.php file, and this file is stored in the route of our theme, then we will put the following:

// tailwind.config.js

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

A more realistic example would involve files that are within folders. Lets say we have a folder structure that looks like this:

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

In this example we would want to use wildcards to make sure that all the files are covered. This 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: [],
}

Create the CSS file

In the route folder of your theme, create a new folder called src, in this new folder create a file called style.css. In this new file paste the following and save the file:

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

Build your CSS

Back in the terminal, run the following command:

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

This will create a new folder and file dist/output.css.

Load the CSS in our theme

We now need to load output.css in our functions.php file. Open functions.php and enter the following:

/**
 * Enqueue scripts and styles.
 */
function cg_your_theme_scripts() {
	wp_enqueue_style( 'output', get_template_directory_uri() . '/dist/output.css', array() );
}
add_action( 'wp_enqueue_scripts', 'cg_your_theme_scripts' );

Your theme will most likely already be using the 'wp_enqueue_scripts' hook, if this is the case, just add the line wp_enqueue_style( 'output', get_template_directory_uri() . '/dist/output.css', array() ); to the function that is executed with the 'wp_enqueue_scripts' hook. The WordPress docs also show how to do this if you need more clarity.

You’re good to go

You are now setup and ready to start using tailwindcss classes. At the moment nothing will have changed as we haven’t used any classes in our theme files. Go ahead and give an element a bg-red-500 class. Make sure npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch is still running in the terminal. If everything is set up properly, your element will now have a red background! Pretty nifty. You are now ready to start building some amazing WordPress websites with Tailwind. You might have already guessed it, but this website is built with WordPress and Tailwind.

Why use Tailwind CSS with WordPress

You might be wondering why you would want to use Tailwind CSS in WordPress. If this is you, my guess is that you do not have much much experience using Tailwind yet. The reason you would want to use it in your WordPress projects is because it speeds up development massively. I have spoken to developers who are against using Tailwind as they say it makes the markup look cluttered and they don’t like the idea of learning something new. But trust me, once you get used to it you will see how easy it can make your life. The class names are intuitive so learning to use it is easy and everything just makes sense. Use it to build just one project and I guarantee you you won’t look back. So this is why it is a good idea to use Tailwind in WordPress.