I’m writing a page with a responsive design: 2 cols side-by-side on wide screen and 1 col stacked on narrow screen like phones.
I use Laravel with tailwind and vite.
As I’m using 3 forms in this page so I cannot use grid, according to documentation as I have to use grid in one form to make the layout I want. But logically I need 3 different forms so I have to use flex.
When I try to use md:flex-row after flex and flex-col, it just refused to show a side-by-side layout no matter the screen width.
I’ll cut this short: just recompile tailwind css with “npm run dev” or “npm run build” after adding md: directive in the html so the new css file actually contains it. Otherwise, in my last issue with md:flex-row not working, there is only lg:flex-row in the css previously compiled, presumably when the new project is created.