I am trying to implement a layout but the classes from Tailwind are not getting applied in the way I expect. I have no other css being read into this file. Here is the basic of the layout:
<>
<div className="flex w-full flex-grow flex-col flex-wrap py-4 sm:flex-row sm:flex-nowrap">
<div className="w-fixed w-full flex-shrink flex-grow-0 px-4">
<div className="sticky top-0 h-full w-full rounded-xl bg-gray-100 p-4">
<ul className="flex content-center justify-center overflow-hidden sm:flex-col">
</ul>
</div>
</div>
<main role="main" className="w-full px-3 pt-1">
{children}
</main>
</div>
<footer className="mt-auto bg-gray-150">
</footer>
</>
I want the result to be like this, where the footer is at the bottom:
Instead I am getting:
Please advise. I have inspected the styles in the console vs. the code and played around. Are there some default global styles in the Redwood framework that would be overwriting the tailwind classes?
TIA!