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.