Swaz's avatar
Level 20

How to properly configure package.json for Tailwind JIT

I'm having issues when using Tailwind JIT. When I add a class to an element, say bg-red-500. It compiles and I see the bg-red-500 class in my app.css file. However when I refresh the webpage I don't see my change. I have to open dev tools, then refresh for my changes to take effect.

I thought this was some cache busting problem so I added .version() to my webpack.mix.js file, but that didn't help.

So I was reading this part of the docs, and I'm wondering if I need to add this stuff my package.json file like this. What is everyone else doing?

https://tailwindcss.com/docs/just-in-time-mode#watch-mode-and-one-off-builds

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "TAILWIND_MODE=build NODE_ENV=development mix",
        "watch": "TAILWIND_MODE=watch NODE_ENV=development mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "TAILWIND_MODE=build NODE_ENV=production mix --production"
    },
    "devDependencies": {
		// ...
	}
}
0 likes
3 replies
Swaz's avatar
Swaz
OP
Best Answer
Level 20

After using this setup for a couple hours, I can confirm that it seems to fix my caching issue.

SebSob's avatar

So, was it really a caching issue?

iambateman's avatar

I have no idea if this is correct, but I ended up adding .version() back to my development and it seems to work.

mix .js('resources/js/app.js', 'public/js') .js('resources/js/home.js', 'public/js') .postCss('resources/css/app.css', 'public/css', [ require('postcss-import'), require('tailwindcss'), require('postcss-nested'), require('autoprefixer'), ]).version();

Please or to participate in this conversation.