Nextjs hot reloading taking 8-10 secs on every change of tailwind css

Question

I am learning Nextjs and trying to use tailwind css with it for the first time. I notice that every change I make to the index.css file on the class selector with @apply directive of tailwind is taking 8-10s to compile and show on the browser.

Steps to reproduce :

1. Run the command

npx create-next-app --example with-tailwind-css test-app

2. Create a button in pages/index.js and give it the classname btn-blue.

3. Run the server using below command

npm run dev

4. Change any property inside styles/index.css file for the btn-blue selector (Ex: change bg-blue-400 to bg-red-400 or so, anything to trigger a re-compile). And observe the time it takes to reflect the changes on the localhost at browser.

Some of my observation after experimenting :

1. This slowness is only when making changes into the @apply style. If I comment all the tailwind code in the index.css and write my own pure css style and change it, the hot reload is instantaneous

2. The hot reload is instant even when changing/adding any tailwind class to the classname of the element in index.js file (Inline styling).

So the issue seems to be only when using tailwind css from an external css file.

I hope you can check and help me on this. Thanks !

Answer 1

Update : With the latest update of Tailwind v2.1, a new Just-in-Time engine is introduced that generates css on the fly making your final css bundle size extremely small and efficient.

This solves the slow rendering issue on NextJS and the renders are instantaneous.

Run the below command to try NextJS boilerplate project setup with the latest Tailwindcss with JIT enabled.

npx create-next-app --example with-tailwindcss with-tailwindcss-app

To enable JIT yourself, update tailwindcss library to the latest and then in your tailwind.config.js file after the module.exports = { line of code add the below property as what should follow -

 mode: 'jit',

Do check out the announcement video at the below blog post that shows all the new features and updates which is really mind-blowing and not to be missed -

https://blog.tailwindcss.com/just-in-time-the-next-generation-of-tailwind-css

---

I found out that this is an open issue (#13488) in the NextJs Github repo. Got the following workaround in the issue discussion thread and it is working like a charm (changes reflecting in less than a second).

Create two css files:

1. With the tailwind imports (@tailwind base,utilities and components) (E.x tailwind.css)
2. Your custom css file with the @apply rules and everything else. (E.x index.css)

Import both tailwind.css and index.css into your pages/_app.js file to apply the style globally.

Now any change you make to @apply in the index.css will reflect immediately in the localhost live server.

I have come to know that the same issue of using tailwind with Gatsby also exist so it may help in that case as well.

Hope you find this useful. Thanks

Answer 2

Had a similar issue. The only thing that fixed it for me was:

• upgrade nextjs to the latest
• delete package.lock or yarn.lock file depending on whichever package manager you use
• delete your entire node_modules/ folder
• reinstall the entire project again (npm install or yarn install)
• now re-run the project. Builds should be near-instant now.