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 :
npx create-next-app --example with-tailwind-css test-app
Create a button in pages/index.js and give it the classname btn-blue.
Run the server using below command
npm run dev
Some of my observation after experimenting :
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
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 !
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:
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
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments