A seemingly very simple issue that has me scratching my head. Project is a Gatsby v4 app with Tailwind v3. The code is from a template component to render a blog list; nothing fancy, similar to standard examples seen on Gatsby. I'm trying to get two divs to render as column on a small screen, and row on wider screens; why is this not working?
<div className='flex flex-col sm:flex-row p-10'>
<div className='sm:w-2/5'>
...
</div>
<div className='sm:w-3/5 pt-2 sm:pt-8'>
...
</div>
</div>
It renders as columns and doesn't seem to recognise the sm: breakpoint. If I take out flex-col, it renders fine as rows. Also, note the sm:pt-8 isn't triggering either.
It is only on this blog template that this breakpoint doesn't seem to work. On other pages in the app, the breakpoints seem to work fine. Is there something I am not understanding?