New Tailwind CSS JIT compiler

Hey Everyone :wave:

Has anyone tried the new tailwindcss-jit compiler? Judging by the description and the video explainer it should make the development side much faster.

I’m going to implement this soon into my project and wondering if anyone had any issues?

Cheers

1 Like

Following up on this:
I have managed to get tailwindcss working following the meteor/examples github here
the new JIT engine is working perfect when meteor does the initial build.
The normal filesize is reduced from 335kb to about 4kb as expected.
The problem arises when changes are made during dev, the JIT engine fails to react to the file change and regenerate the .css file.
I don’t know enough about controlling the postcss build process to suggest a fix.
Perhaps this is also due to some file caching?

Anyone more knowledgeable have any ideas?
Cheers

Yes, I’m experiencing this as well. Don’t know where to start looking.

@zodern might be able to say something about this

Just about to jump into porting over to tailwind.

Did anyone here manage to figure out jit?

Hey guys, I just tried with Tailwind 2.2 and it seem working properly!

Just add mode: 'jit' in tailwind config and do not forgot to add TAILWIND_MODE=watch before meteor run.

How did you get it to work? I added that plus the config and if I add a new class I have to stop and start meteor. Thanks

This is my commit. This is the only thing I did and when I add or remove a class, the app reload.

Damn, after 2-3 hours of reload it completely stop working!

This doesnt work for me unfortunately. The console does now say:

warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.

But still if I change classes anywhere it doesnt refresh “just in time” I have to restart meteor everytime.

Whats your postcss configuration?

The correct way to set TAILWIND_MODE=watch is:

"start": "set TAILWIND_MODE=watch&& meteor run"

When running npm start, my terminal now says:

info - Tailwind CSS is watching for changes...
info - https://tailwindcss.com/docs/just-in-time-mode#watch-mode-and-one-off-builds

Unfortunately jit mode automatic rebuilding still doesnt work and you have to restart meteor for every new class you add :frowning:

I found a different way to use tailwindcss with jit mode in meteor on the basis of this guide.

So instead of using postcss you only use the tailwindcli to create the tailwind css file.

Setup the following npm script:

"scripts": 
    {
      "tw-dev": "npx tailwindcss -i ./tailwind.css -c tailwind.config.js -o ./client/main.css --watch"
	},

tailwind.css in root folder (your tailwind styles):

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

.someclass{
   @apply m-2
}
...

Your tailwind_config.js in root, here its especially important to setup up purge correctly, otherwise jit mode wont work:

module.exports = {

    mode: "jit",

    purge: ["./imports/ui/**/*.{js,jsx,ts,tsx}", "./public/*.html"],

    theme: {

        extend: {},

    },

    variants: {

        extend: {},

    },

    plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")],

}

Now when you run npm run tw-dev it will write all your tailwind css in the main.css and watching any file change for jit mode, to update main.css.

It works pretty good. Although not perfect, adding a new tailwind class triggers two reloads, first the file where the class was changed, then main.css. It doesnt bother me to much though, its a matter of a few seconds.

I also installed the handy concurrently npm package. Then you can add the following starting script:

"start": "concurrently \"npm:tw-dev\" \"meteor run\""

So you dont have to remember to start tailwindcli and meteor at the same time + both run in the same terminal, which is really nice.

Also you now can (and maybe should?) remove all postcss packages, if you dont rely on them otherwise. I put the standard standard-minifier-css package back in aswell.

Last but not least tailwindcli offers another command to minimize the css file and purge all not used classes for production:

"tw-prod": "set NODE_ENV=production&& npx tailwindcss -i ./tailwind_config.css -c tailwind.config.js -o ./client/main.css --minify"

You probably should include this in your build process, but it wont break your neck if you dont.

Keep in mind all of this was done on Windows 10. I´m sure this isnt the most optimal way to do this, but until someone figures out how to use jit mode with postcss, I am perfectly fine running it like this.

Thanks for this @web030 . As you say it’s not perfect but it’s better then nothing.

It would be great to have some input from @filipenevola :slight_smile:

Seems like the problem is this change (copied from Just-in-Time Mode - Tailwind CSS);

Quote:

As of Tailwind CSS v2.2+, the JIT engine depends on PostCSS’s directory dependency messages to register your content files as CSS build dependencies with your build tool. These are a fairly new addition to PostCSS (added in May 2021), and not all build tools have been updated to support them yet.