CODEWITHSUNDEEP
cssflexboxtailwind-css
Neavehni
Neavehni

Reputation: 417

Problem with tailwind css responsive flex direction

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://i.sstatic.net/lR4C4.jpg

Upvotes: 12

Views: 35312

Answers (1)

chojnicki
chojnicki

Reputation: 3614

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.

Upvotes: 31

Related Questions