I am trying to get the height of the div to h-2 and on medium is set a class with height animation.
The problem is that tailwindcss still uses the h-20 on mobile while h-2 should be used.
any idea why ?
here is the div in question :
<div className={`h-2 md:flex w-full text-white fixed bg-white mt-1 ${scrolling ? 'md:animationNav h-16' : 'md:animationBasisNav h-20'} dark:bg-gray-400`}></div>
The problem is that tailwindcss still uses the h-20 on mobile while h-2 should be used.
That's because you are using the class h-20 (applies the 20 height in all screen sizes) instead of md:h-20 (applies the 20 height in screen size md and upwards).
Similarly, you might want to change h-16 to md:h-16.
You need to apply the md: prefix to all classes that you want to apply only in screen size md and upwards. Similarly for all other breakpoint prefixes. All classes are mobile-first by default (and "by default" means the absence of a breakpoint prefix). See the Responsive Design section on Tailwind CSS docs.
Hey, maybe you want to try with this:
<div className={`h-2 md:flex w-full text-white fixed bg-white mt-1 ${scrolling ? 'md:animationNav md:h-16' : 'md:animationBasisNav md:h-20'} dark:bg-gray-400`}></div>
Now you are defining that the default height is 2, while in medium devices is 20.
Use this pattern in all your classes.
First: Define the height in mobile
Second: Add the classes for larger screen sizes.
