Margin top not responsive

[IgorDePaula]

I using tailwindcss 1.6.2. and I write my code with

 mt-2 sm:mt-2 md:mt-2 lg:mt-0 xl:mt-0

but on screens large and extralarge the margin-top continue with margin-top 2, and not with 0.

What do I wrote wrong?

[simonswiss]

Hi @IgorDePaula 👋

This should absolutely work!

A note: you don't have to specify sm:mt-2 md:mt-2. If the margin top remains at level 2 from small screens, no need to redeclare it for the sm and md breakpoints, these screensizes will apply the margin declared in mt-2.

In your code example, the lg:mt-0 class should override the margin-top and set it to 0 for large screens and up. Again, no need to specify xl:mt-0, it will be inherited from lg.

My only guess for it not to work: are you using these classes inside a parent element with a spacing-y-2 class?

When you use spacing utilities, they take precedence over the individual child margin classes because of specificity.

If that's not the case, could you please share a bit more of your HTML code, so it's easier to see what's going wrong?

[IgorDePaula]

I fix with removing margin-top from this compoent, and add margin-bottom on component side.