Breakpoint value is overwritten by move value on tailwindcss

Question

I have a problem but I haven't found any problem anywhere yet.

When I use padding or margins on mobile and want to change those padding/margins on a larger screen, the base value I set for mobile remains the same and overrides Specific values ​​at different breakpoints.

This is what I can see in the debugger: As you can see the py-3 value, it retains and overrides the py-0 which applies to the md breakpoint.

---

This is the mobile version

---

This is the desktop version

---

This is my code, py-3 and md:py-0 applied to the button:

<div className="...">
    {languages.map((lng) => (
        <button className="px-2.5 py-3 md:py-0 text-xs leading-5 text-gray-500 text-center">
            {lng.name}
        </button>
    ))}
</div>

I use taildwindcss for a classic next.js installation without any extension/theme replacement. There is no place in my css file where I can override these classes.

Did I miss anything?

Edit: I tried applying "!" in front of my py-0: md:!py-0 but it's still the same. Even if the !important keyword is added correctly, it will still be overridden.

Answer 1

!important Assignment overrides the following (so under normal circumstances Coverage) @media { }

Get your .py-3 { } to display correctly, No need required !important.