I'm attempting to incorporate some animation on the height property within the md breakpoint, but for some reason Tailwind CSS isn't applying my class.
<div className={`h-12 bg-blue flex w-full text-white fixed mt-1 md:bg-white ${scrolling ? 'md:animationNav md:h-16' : 'md:animationBasisNav md:h-20'} lg:bg-gray-500 `}>
<p>test</p>
</div>
Here's my SASS:
.animationNav{
-webkit-transition: height 1s ease-in-out;
transition: height 1s ease-in-out;
img{
-webkit-transition: padding 1s ease-in-out;
transition: padding 1s ease-in-out;
padding: 0;
}
}
.animationBasisNav{
-webkit-transition: height 1s ease-in-out;
transition: height 1s ease-in-out;
img{
-webkit-transition: padding 1s ease-in-out;
transition: padding 1s ease-in-out;
padding: 0.25rem
}
}
I've tried adding it to the TailwindCSS utilities like this, but it still doesn't work:
@layer utilities {
.animationNav{
-webkit-transition: height 1s ease-in-out;
transition: height 1s ease-in-out;
img{
-webkit-transition: padding 1s ease-in-out;
transition: padding 1s ease-in-out;
padding: 0;
}
}
.animationBasisNav{
-webkit-transition: height 1s ease-in-out;
transition: height 1s ease-in-out;
img{
-webkit-transition: padding 1s ease-in-out;
transition: padding 1s ease-in-out;
padding: 0.25rem
}
}
}
Upon loading the page:
https://i.sstatic.net/n7blo.png https://i.sstatic.net/8EIdQ.png
Although scrolling triggers the height adjustment inside md, my class names do not get applied:
https://i.sstatic.net/y1vs1.png https://i.sstatic.net/xNfE9.png
Any thoughts on why Tailwind CSS is ignoring my class? Do I need to configure something in the tailwind.config.js file?