# Next.js and Tailwindcss render incorrectly on client-side-render **URL:** \ **Category:** Next.js\ **Created:** [October 30, 2023, 10:58pm UTC](https://forum.codewithmosh.com/t/next-js-and-tailwindcss-render-incorrectly-on-client-side-render/23380 "2023-10-30T22:58:55Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![JerryHobby](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/jerryhobby/32/5370_2.png) [@JerryHobby](https://forum.codewithmosh.com/u/JerryHobby)\ **Post date:** [October 30, 2023, 10:58pm UTC](https://forum.codewithmosh.com/t/next-js-and-tailwindcss-render-incorrectly-on-client-side-render/23380/1 "2023-10-30T22:58:55Z")
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 ---
**Author:** ![Programmist](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/programmist/32/7006_2.png) [@Programmist](https://forum.codewithmosh.com/u/Programmist)\ **Post date:** [November 3, 2023, 4:14am UTC](https://forum.codewithmosh.com/t/next-js-and-tailwindcss-render-incorrectly-on-client-side-render/23380/2 "2023-11-03T04:14:49Z")
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): ```auto 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](https://tailwindcss.com/docs/configuration#important). Hope this helps. ---
**Author:** ![JerryHobby](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/jerryhobby/32/5370_2.png) [@JerryHobby](https://forum.codewithmosh.com/u/JerryHobby)\ **Post date:** [November 4, 2023, 12:29am UTC](https://forum.codewithmosh.com/t/next-js-and-tailwindcss-render-incorrectly-on-client-side-render/23380/3 "2023-11-04T00:29:07Z")
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! ---
**Author:** ![Programmist](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/programmist/32/7006_2.png) [@Programmist](https://forum.codewithmosh.com/u/Programmist)\ **Post date:** [November 4, 2023, 3:48am UTC](https://forum.codewithmosh.com/t/next-js-and-tailwindcss-render-incorrectly-on-client-side-render/23380/4 "2023-11-04T03:48:06Z")
I’m happy it helped!