How to set up Tailwind CSS (JIT) for WordPress

#

Contents

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 [email protected] [email protected] [email protected] [email protected]

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"
  },

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!

Mike Kuczek

Mike Kuczek

WordPress developer, designer, psychology student and bluberry farmer. CEO of Biiird Studio.
❤ SHARE, THANK YOU ❤
Share on facebook
Share on twitter
Share on linkedin
Share on email

Improve performance of WP_Query

Using these three arguments as an addition to your’s can speed up the query process. Check the comments to be sure you can use them.

[wbcr_php_snippet id="820"]

4 thoughts on “How to set up Tailwind CSS (JIT) for WordPress”

  1. Ryan
    #LINK,

    Shouldn’t the content object be removed from Purge?

    1. Mike Kuczek
      #LINK,

      This content element tells tailwind in which files to look for tailwind classes, so it’s necessary. Modify it to match your folder structure 👍.

  2. Rafael
    #LINK,

    Very useful, THANK YOU.

    In the Tailwind config file, you have the “purge” item with an array syntax but it should actually be an object. The build wouldn’t compile because an Exception was thrown.

    Anyway, this is an absolutely amazing article to get things started. Some more config needs to be done to remove unused styles in the production build (since the dev css is over 3 MB!, you wouldn’t want to ship that to actual users) (If anyone is interested you can read more about it in the docs: https://tailwindcss.com/docs/optimizing-for-production).

    Regardless of that I loved the article as I was having trouble myself getting everything set up, and it kind of bothered me that the official docs assumed people know their way around PostCSS and the other Javascript Build tools. Thanks a ton.

    1. Mike Kuczek
      #LINK,

      You are absolutely right about the purge object! I have corrected it. Thanks!
      Did you have a problem with the JIT compiler? You mention that the dev build is over 3MB, but if you use the JIT compiler it should never be this big. The dev build should look exactly like the production build.

Leave a Comment

Your email address will not be published. Required fields are marked *

Zasób 1

Switch to Polish: 

Ta strona korzysta z plików cookie, korzystając z niej zgadzasz się na ich wykorzystanie. Więcej informacji.