Abnormal Nextjs Cache issue with Tailwind CSS

[dukesx]

What version of Tailwind CSS are you using?

v2.2.7

What build tool (or framework if it abstracts the build tool) are you using?

Next JS

What version of Node.js are you using?

16

What browser are you using?

Edge Latest

What operating system are you using?

Windows 11

Reproduction repository

https://github.com/dukesx/Coding-Bolt

Describe your issue

I am trying to use bg-* with dark mode. i have a toggle for dark mode, svg icons that change upon toggling (sun for light mode, moon for dark mode). Now , since you can only see the sun icon in dark mode, i wanted to keep the svg background yellow normally, but on hover, change it to grey like this :

<div className="bg-yellow-400 hover:bg-gray-600  cursor-pointer  p-2 rounded-full hover:p-2 hover:rounded-full hover:h-[37px] hover:w-[37px] transition-all ease-in-out">
<SvgIcon  />
</div>

If i make this change fresh, and during dev mode, it becomes yellow but if i reload the page, and see, the background remains grey, it doesn't retain the yellow background at all. When i switch from light to dark or dark to light (on the client), the yellow background comes back, acts exactly the way i want.

Investigation

I have noticed that it doesnt scope bg-yellow to the div at all, instead it just scopes the bg-gray-600 to the div, with and without hover. I wonder why is that happening

This issue is also reproducible on the live server : https://codingbolt.com which is run on Ubuntu linux, separate dedicated server

Update-1

The issue seems to exist even if i remove className attribute from the Svg.

Seems like caching issues inside Nextjs. The browser has been cleared in everyway possible along with "disable cache" option in Network tab to avoid cached css. Browser isnt the issue, thats for sure. Now i am trying with deleting Node_modules and reinstalling to see if it works again.

Update-2

The classes i see in the browser inspector are old, hours and hours old, no wonder the abnormality. However, if i do change theme on client side, i see the fresh code that i am writing , but if i reload page (server) , i see the same old code. Browser still not at fault.

Update-3

Removing & Reinstalling Node_Modules didnt work. Same Result

Deeper Investigation

The class names are exchanged, the classNames i am using for the "Moon" svg icon are being used on "Sun" , on reload (Dark Mode) but for some reason, "Moon" 's classNames still remain preserved on reloading page (Light Mode). Strange.

Temporary Workaround

i have kept Svgs inside a div and have split classNames in between Div and Svg Hoping this might eliminate cache at NextJS or Tailwind's End. It Works for the moment.