Problem with tailwind css responsive flex direction

user_10816202 0
Viewed 13192

I've been working on a side project to learn tailwind css and i'm facing an issue with the responsiveness of my flexbox direction.

From what i've read you can make an html tag responsive by adding sm: md: lg: so it will use the corresponding class based on the screen resolution. But when i try this with flexbox it doesn't work.

This is a piece of my code: <div class="flex-col md:flex-row h-screen w-screen m-3">.

As you can see i want to use flex-row on a screen larger than md:. But it keeps using flex-col even when i exceed the md: resolution which is 768px.

Full code: https://codesandbox.io/s/pedantic-hoover-lr93g?file=/index.html

This is how it looks when i remove flex-col and only use flex: https://imgur.com/a/tUJKPro

flexbox tailwind-css css
1 Answers

You cannot use flex-col or flex-row (and other flex classes) without "flex" alone. Class "flex" corresponds to "display: flex" (without it your divs are blocks) and "flex-row" is "flex-direction: row" that will not work without flex display property.

Check the docs: https://tailwindcss.com/docs/flex-direction

So instead

<div class="flex-col md:flex-row h-screen w-screen m-3">

should be

<div class="flex flex-col md:flex-row h-screen w-screen m-3">

Fixed code: https://codesandbox.io/s/admiring-framework-lxz8y?file=/index.html

Also modify widths on smaller devices the way you need them.

user_105857730
Related