I have encountered a puzzling issue that seems to have no answers thus far.
Whenever I set paddings or margins for mobile devices and attempt to adjust these values for larger screens, the original mobile base value stubbornly persists and overrides my specified values at different breakpoints.
Upon inspecting the debugger, it's evident that the py-3 value remains dominant over my py-0 setting intended for the md breakpoint.
This snippet showcases the situation on the mobile version:
https://i.sstatic.net/n0HFK.png
Here we have the desktop version:
https://i.sstatic.net/n2XPZ.png
The following code demonstrates how the py-3 and md:py-0 are implemented on the buttons:
<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 am using a standard next.js setup with tailwindcss and have not made any customizations to extend or change themes in my CSS. Despite attempts like adding an "!" before my py-0 as seen in md:!py-0, the override issue persists even when using the !important keyword correctly.
Is there a step I may be overlooking?
EDIT: Even after trying approaches like adding "!important", the issue of the classes being overridden continues.