Next.js and Tailwindcss render incorrectly on client-side-render

Next.js
1

I recently finished Issue Tracker using next.js and tailwindcss. After using

npm run build
npm run start

I noticed the production build displays several things incorrectly. After some debugging and research, I found that when the app is generated, the CSS files are imported in a way where some Tailwind classes are overridden by other classes.

In particular, my was presenting with a bg-transparent instead of bg-blue. I’m sure there are other CSS conflicts as well. This only happens on client-side-rendered components, such as the edit-issue form, the delete-issue button, and the OK button on the delete confirmation screen.

The short-term fix was to add bg-blue-500 to the className property for each button.

The correct solution – which I don’t know – is to fix whatever is causing Tailwind CSS to be overridden on client-side renders. There is a lot of suggestions online but all are based on older versions and have not been helpful.

Perhaps there is a place where we can put the “important” tag or there is a certain directive in a configuration file like postcss.config.js or tailwindcss.config.ts. But nothing I’ve tried has worked, yet.

If you know the solution, please post it here. If I sort it out, I’ll add the solution. Or maybe @Mosh knows the solution.

Jerry

2

Hi Jerry. I have specificity issues with Tailwind more than I’d like and often have to override classes with the with important bang operator (!). For example, my focus style wasn’t being applied due to specificity, and I fixed it by I adding a bang after the pseudo-class, in front of the utility class (always has to go at the beginning of the utility class name):

className="focus:!text-info"

Anyway, not sure if this will help, but here is Tailwind’s doc that explains options for applying specificity overrides. You can apply the ! directly to one utility class (as above), or there are also tailwind.config.js options that apply to many utility classes at once.
https://tailwindcss.com/docs/configuration#important.

Hope this helps.

1 Like
3

Thanks for that response. I had actually tried that, but I was putting the ! at the end, not the beginning. Your tip resolved my issues. Syntax is everything!

Appreciate you!

1 Like
4

I’m happy it helped!