Next.js and Tailwind: New Classes Not Automatically Loaded into Stylesheet
Unanswered
Maltese posted this in #help-forum
MalteseOP
Hello! I’m encountering a strange issue and I hope you can help me. I'm using Next.js 15 with Tailwind, and I’ve noticed that when I add a new class, like px-10, that I haven't used before in my project, it doesn’t trigger Next.js or Tailwind to generate a new stylesheet. As a result, the px-10 class doesn’t appear in the old stylesheet, and the style isn’t applied to my element. However, when I modify the content of an HTML element, Next.js seems to hot reload and correctly fetch the new stylesheet that includes the px-10 class. I’m not sure why this doesn’t happen immediately when I add a new class. Any help would be appreciated! 🙂
5 Replies
West African Lion
It seems Tailwind CSS problem. So did you encounter this problem after updating the next.js version to 15?
Polar bear
Is the tailwind config file taking into account the file path of the file your are working on?
Asian black bear
If you happen to use Safari, it's a known issue with Safari caching CSS aggressively.
Least Storm-Petrel
I encounter this too with a WSL2/Firefox stack with next@14 and up. I usually have to do a full page refresh - or as you mention, certain changes to the HTML also seem to work. (Although not for every HTML change)
Does a manual refresh work for you too or does it still not update?
Does a manual refresh work for you too or does it still not update?
West African Lion
Okay, let me explain about this issue.
It sometimes happens when you use dynamic class names.
For example:
In this case, if you use px-10 by static class name in components, it will works correctly.
So we can update this code like below.
It sometimes happens when you use dynamic class names.
For example:
<div className={`px-${render ? '10' : '5'}`}>In this case, if you use px-10 by static class name in components, it will works correctly.
So we can update this code like below.
<div className={render ? 'px-10' : 'px-5'}>