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.