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.<\/p>\n\n\n\n
I use Laravel with tailwind and vite. <\/p>\n\n\n\n
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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
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 …