I have a react project, and I'm creating a className for a div using classname package and tailwind classes. This div is actually the root element of a component that has some classes and accepts some from outside. The final class looks like below:
class="flex-1 bg-white border p-8 mb-6 rounded-md tracking-wide mt-1 !mb-0 md:mb-6 !bg-transparent md:bg-white border-0 md:border-1 !p-0 md:!p-6 tracking-wide relative"
It works fine when I test it on my local branch and the bottom margin is zero. But when I push it to my main branch and it builds what I see on the browser is different. The '!mb-0' got overridden and the mb-6 still shows. This problem is repeated everywhere.
Is there a way to avoid this so what we see on the local host acts exactly like the one on the main branch and demo after deploy?
This is how the margin classes look like after deploy
