Has someone managed to use JIT mode of tailwindcss with eleventy ?

[neo7-studio-web]

I installed tailwindcss 2.1 and tried to follow the docs : https://tailwindcss.com/docs/just-in-time-mode

I set :
mode: 'jit'
in my tailwind.config.js file.

But something like :
eleventy --quiet --serve && set TAILWIND_MODE=watch postcss assets/css/index.css -o _site/assets/css/index.css -w
doesn't work. I wonder if locally there can be 2 processes "watching" at the same time...

Any idea ?

[daflh]

I think that's because the first command never ends (since it's watching files), so it will never execute the next command. How about using something like concurrently, then just run concurrently "eleventy --quiet --serve" "set TAILWIND_MODE=watch postcss assets/css/index.css -o _site/assets/css/index.css -w"?

[neo7-studio-web]

Thank you it worked !

For anyone trying Tailwind 2.1+ and JIT mode with eleventy :

• I installed concurrently :
  npm i concurrently --save-dev

• here is my package.json (adapt path to index.css with yours)

"scripts": {
    "build": "eleventy --quiet && postcss assets/css/index.css -o _site/assets/css/index.css",
    "start": "eleventy --quiet --serve",
    "dev": "concurrently \"eleventy --quiet --serve\" \"postcss assets/css/index.css -o _site/assets/css/index.css -w\""
  },

More things are to be updated :

• tailwind.config.js :

module.exports = {
  mode: 'jit',
  purge: {
    content : [
    './src/**/*.njk',
    './safelist.txt',
    ],
...

• add a safelist.txt if you need it. It looks like :

bg-pink-600
bg-blue-600
...

• And ENV variable is REQUIRED for deployment in production not to crash with JIT (not working with only NODE_ENV=production)
  TAILWIND_MODE=build