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

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!

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"]

17 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.

  3. Igor
    #LINK,

    Hi Mike, thank you for an amazing article. However, what about JIT when you move the content of your theme to database (e. g. to Gutenberg blocks)? Suddenly there’s no way for JIT to know which classes to complile. I’ve been struggling with this and can’t find any good solution. The only thing which came to my mind was to render all WordPress templates to a temporary PHP file which was then included in purge option in tailwind config file. It works but it’s very slow.

    1. Mike Kuczek
      #LINK,

      Hi, glad you like the article 🙂. I also thought about that. It’s impossible currently to dynamically add tailwind classes to the css file based on which blocks users use. All classes that the registered blocks use need to be in the css file. If we wanted to allow users to put tailwind classes somewhere in the admin area, and then adjust the css file accordingly we would have to have some kind of an API to connect to.
      As far as the purge object, you can make it scan any files you have, if you have problems with it I could help you, explain a bit more.
      If I misunderstood the problem you are facing, please write back 👍

  4. Andrew
    #LINK,

    HI there, Would it be possible to book some time with you to ask a few questions on how to get this set up?

    1. Mike Kuczek
      #LINK,

      Yes, sure, you can email me at [email protected] or write to me on discord, where my nickname is: mic22#3760

  5. Will Sniff
    #LINK,

    Hi Mike. Thank you for writing this article. As someone relatively new to WordPress, I found it the only clear resource on how to set up Tailwind without any third party tools like Laravel Mix.

    One thing that tripped me up is that I forgot to run wp_head() anywhere, so Tailwind would not work. Maybe you could mention that somewhere for other noobs like myself?

    Why I’m actually writing is that I have to stop the watch script and rerun “npm run watch” every time I modify my html files. Otherwise new Tailwind classes I decide to use aren’t being included in main.css. How can I make this happen automatically after I hit Save? Could you point me to something that would help me figure this out?

    1. Mike Kuczek
      #LINK,

      Hi!
      You actually reminded me of something I forgot to mention in the article, Thanks!
      Tailwind now requires two environment variables to be set correctly in order for the watch mode to work. These are: NODE_ENV=”development” and TAILWIND_MODE=”watch”.
      I have updated the article with an explanation on how to set them.

      1. Ryan
        #LINK,

        Not sure if I am doing it wrong but not sure how to set these 2 variables, I tried them in terminal but still the main.css file wont generate.

        1. Mike Kuczek
          #LINK,

          I don’t think I can help you without looking at your setup. If you want we can meet up on discord on Sunday and I can take a look. My DC: Mic22#3760

          1. Ryan
            #LINK,

            I was able to figure out by installing cross-env and then using the following line of code.

            “watch”: “cross-env NODE_ENV=development TAILWIND_MODE=watch npx postcss ./assets/src/main.css -o ./assets/css/main.css –watch”

  6. Conor
    #LINK,

    Hi Mike, thanks for this great article. I am using Ryan’s solution by using cross-env to set the environment variables and I have it running correctly. However whenever I add or remove a class, the complier doesn;t seem to be picking up the changes. I have to rerun npm run watch. Just wondering where I could be going wrong!

    1. Mike Kuczek
      #LINK,

      Hi Conor, in my understanding if you have the purge object set up correctly in your tailwind.config.js and you have system variables set up correctly JIT should be working fine. I have it set up in 6 projects and never had this issue.

      When you run: npm run watch, what does the console say?
      It should say:
      info – Tailwind CSS is watching for changes…

  7. Matt
    #LINK,

    Hey Mike, I came across this article while doing some research for a project I’m working on which I thought you might be interested in. It’s called Gust ( https://www.getgust.com ) and it adds Tailwind CSS support to WordPress via a theme. It’s got support for all the essentials ( custom Tailwind config, Purge CSS, etc ) along with a few extras. It’s definitely a different approach to adding Tailwind CSS than the one you have here, with less dev work to get things going. Check it out, hopefully it can be of some use.

    1. Mike Kuczek
      #LINK,

      Thanks Matt, I will definitely check it out.

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.