Styling with TailwindCSS

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!

Try putting flex-grow-1 on your main. This is a CSS issue, Redwood won’t mess with your styles.

This page is great for learning more about flex box. Another mistake you’re making is using flex grow on the parent - that’s a child property.

Thank you! I just wanted to confirm that RS would not be overwriting my styles. I will keep digging, and yes that CSS-Tricks is a solid classic!!

yeah :slight_smile: the redwood styles are all applied with class names, there’s nothing going on behind the scenes (other than tailwind preflight and all that)