How to set up Tailwind CSS (JIT) for WordPress

Installing Tailwind became a lot easier since this post was first written, so I have rewritten it. It also doesn’t require webpack now and is dozens times faster! Enjoy.

Before we start you will need:

1. Local server (php, apache and MySQL)
2. Node.js
3. WordPress installed

Setting up a theme

You can use your own theme or go to underscores.me and generate a new one.

Enqueue your CSS in the functions.php file like this:

add_action( 'wp_enqueue_scripts', 'enqueue_function', 10 );
function enqueue_function() {
	$version = ( wp_get_environment_type() === 'development' ) ? time() : BIIIRD_THEME_VERSION;
	wp_enqueue_style( 'tailwind', get_template_directory_uri() . '/assets/css/main.css', $version, true );
}

The $version variable is just one very useful trick I use to swap the time() function for the theme version in production environment. To use it you have to define at the top of your functions.php the constant like this: define( 'BIIIRD_THEME_VERSION', '1.0.2' );.

Now in your theme folder create an assets folder, and inside it two folders named src and css. Inside the src folder create your css file and name it: main.css.

Installing necessary packages

• Tailwind CSS
• Autoprefixer
• Postcss and postcss-cli

Open your terminal/command prompt and run this:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest postcss-cli@latest

At this point you have everything you need installed.

Creating config files

Now create a tailwind.config.js file and put this object inside:

module.exports = {
	mode: 'jit',
	purge: {
		content: [
			'./src/**/*.php',
			'./template-parts/**/*.php',
			'./*.php',
			'./inc/**/*.php',
			'./inc/*.php',
			'./src/**/*.js',
		],
	},
	darkMode: false, //you can set it to media(uses prefers-color-scheme) or class(better for toggling modes via a button)
	theme: {
		extend: {},
	},
	variants: {},
	plugins: [],
}

This will be the file where you configure your tailwind setup, now that there is a 'jit' mode (which means Just-In-Time compilation) you probably won’t have to make much changes to this file. The purge item says which files should the compiler look for classes, you may have to modify it to fit your theme.

And one last file postcss.config.js, and inside it:

module.exports = {
	plugins: {
		tailwindcss: {},
		autoprefixer: {},
	}
 }

Now in the /assets/src/main.css file put this: (you can ommit the first line if you just want tailwind as an addon to a sass project)

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

Adding a start script to npm

Open package.json file and modify the scripts object to add a watch script and tell it to run postcss:

"scripts": {
	"watch": "npx postcss ./assets/src/main.css -o ./assets/css/main.css --watch",
	"zip": "git archive --format zip --output C:\Users\{your_user_name}\Desktop\{your_theme_name}.zip main"
  },

At this point make sure you have these two environment variables set correctly, you can set them in the terminal like this: (on Linux, ommit the SET keyword) ^{[thanks Will for the reminder]}

SET NODE_ENV="development" ; SET TAILWIND_MODE="watch"

By now everything should be working fine, run this in the terminal to initialize watching of your changes:

npm run watch

Now you can jump into the real fun, start using Tailwind classes wherever you want, the JIT compiler will look which classes you have used and will only put these into the main.css file!