How to use flex in tailwind - css

I have 3 column page made with tailwind css and I wan to move the first column on top of 2nd column when screen size is less than '2xl' in tailwind while the 3rd col is hidden at xl breakpoint
<div className="relative z-0 flex overflow-hidden flex-grow">
{/* Start first column */}
<aside className="relative 2xl:order-first 2xl:flex-col flex-shrink-0 w-96 border-r border-gray-200 overflow-y-auto">
<div className="absolute inset-0 py-6 px-1">
</div>
</aside>
{/* End first column */}
{/* Start main area*/}
<main className="flex-1 relative z-0 overflow-y-auto focus:outline-none">
<div className="absolute inset-0 py-6 px-4 sm:px-6 lg:px-8">
</div>
</main>
{/* End main area */}
{/* Start third column */}
<aside className="hidden xl:order-last xl:flex xl:flex-col flex-shrink-0 border-r border-gray-200 w-96">
<div className="inset-0 py-6 px-1"></div>
</aside>
{/* end last column */}
</div>
any suggestions or solutions will be appreciated


If I understand the need correctly, we have to:
Make the layout responsive so that 1 column layout is used until breakdown xl, 3 columns until layout 2xl and 2 columns after
Hide the 3rd column after breakdown xl
You can definitely achieve this with out of the box tailwind css
With pure: flex playing with the width of the columns
With grid layout: better IMHO as it is more stable, you can easily add gap without destroying the layout
<head>
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-blue-100">
<div class="text-xl p-4">Pure Flex solution</div>
<div class="flex flex-row flex-wrap bg-red-400 p-4">
<div class="w-full xl:w-1/3 2xl:w-1/2 p-4 bg-yellow-400">
Column 1
</div>
<div class="w-full xl:w-1/3 2xl:w-1/2 p-4 bg-gray-400">
Column 2
</div>
<div class="w-full xl:w-1/3 2xl:hidden p-4 bg-blue-400">
Column 3
</div>
</div>
<div class="mt-4 text-xl p-4">Grid solution</div>
<div class="grid grid-cols-1 xl:grid-cols-3 2xl:grid-cols-2 gap-4 p-4 bg-pink-400">
<div class="w-full p-4 bg-yellow-400">
Column 1
</div>
<div class="w-full p-4 bg-gray-400">
Column 2
</div>
<div class="w-full 2xl:hidden p-4 bg-blue-400">
Column 3
</div>
</div>
<div class="mt-4 text-xl italic p-4">Other understanding of the need</div>
<div class="grid grid-cols-1 2xl:grid-cols-3 gap-4 p-4 bg-purple-400">
<div class="w-full p-4 bg-yellow-400">
Column 1
</div>
<div class="w-full p-4 bg-gray-400">
Column 2
</div>
<div class="w-full xl:hidden 2xl:grid p-4 bg-blue-400">
Column 3
</div>
</div>
</body>

Related

Grid of unequal heights in TailWindCSS

Is there a way to achieve a grid of unequal column heights (based on content in each div) using TailWindCSS ?

One way is to use flex to create a grid of unequal heights within the same column.
Please use full page view to see below code.
<script src="https://cdn.tailwindcss.com"></script>
<div class="container m-auto p-4">
<div class="flex flex-row space-x-4">
<!-- First Col -->
<div class="flex w-full flex-col space-y-4 bg-red-200">
<div class="h-40 rounded-lg bg-red-500"></div>
<div class="h-32 rounded-lg bg-red-500"></div>
<div class="h-60 rounded-lg bg-red-500"></div>
</div>
<!-- Sec Col -->
<div class="flex w-full flex-col space-y-4 bg-blue-200">
<div class="h-12 rounded-lg bg-blue-500"></div>
<div class="h-72 rounded-lg bg-blue-500"></div>
<div class="h-48 rounded-lg bg-blue-500"></div>
</div>
<!-- Third Col -->
<div class="flex w-full flex-col space-y-4 bg-green-200">
<div class="h-28 rounded-lg bg-green-500"></div>
<div class="h-40 rounded-lg bg-green-500"></div>
<div class="h-64 rounded-lg bg-green-500"></div>
</div>
</div>
</div>

TailwindCSS - how to center content on a flex-grow item

I have a basic page layout as follows. I would like to center the four items in the middle of the page, not only horizontally, but vertically. Centering horizontally works but vertically doesn't. According to the tailwind doc, entering can be acheived using the place-content-center class. However, this doesn't seem to work here. Any ideas about how to do this?
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" rel="stylesheet"/>
<div class="flex flex-col h-screen">
<header class="h-10 bg-red-500">Header</header>
<div class="flex-grow place-content-center bg-green-500">
<h1>Content</h1>
<div class="grid place-items-center justify-center">
<div class = "grid gap-6 md:grid-cols-2 content-center">
<div class="h-[200px] w-[300px] bg-yellow-500 flex flex-col items-center">
Item 1
</div>
<div class="h-[200px] w-[300px] bg-yellow-500 flex flex-col items-center">
Item 2
</div>
<div class="h-[200px] w-[300px] bg-yellow-500 flex flex-col items-center">
Item 3
</div>
<div class="h-[200px] w-[300px] bg-yellow-500 flex flex-col items-center">
Item 4
</div>
</div>
</div>
</div>
<footer class=" w-full h-10 bg-blue-500">Footer</footer>
</div>

It appears that you just need to add the h-full class to your content wrapper:
<div class="grid h-full place-items-center justify-center">
You can see a working example here: https://play.tailwindcss.com/U5NB6t6heB

Flex box column not equal width with flex: 1

Hi I am trying to make flex columns equal width but it doesn't seem to be working with flex: 1.
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.17/tailwind.min.css" rel="stylesheet" />
<section class="flex flex-wrap w-full justify-center items-center content-center mt-20 lg:mt-0 min-h-85 fade fadeout">
<div class="flex flex-col w-full md:w-1/3 max-w-md items-center bg-red-100">
<div class="py-12 flex-1 bg-red-200">
<h4 class="font-semibold tracking-widest text-xs">Box 1</h4>
<p>Box 1 Flexbox 00000000</p>
</div>
</div>
<div class="flex flex-col w-full md:w-1/3 max-w-md items-center bg-blue-100">
<div class="py-12 flex-1 bg-blue-200">
<h4 class="font-semibold tracking-widest text-xs">Box 2</h4>
<p>Box 2 Flexbox 0</p>
</div>
</div>
<div class="flex flex-col w-full md:w-1/3 max-w-md items-center bg-green-100">
<div class="py-12 flex-1 bg-green-200">
<h4 class="font-semibold tracking-widest text-xs">Box 3</h4>
<p>Box 4 Flexbox 000</p>
</div>
</div>
</section>
I want it to be the size of the flex col with the widest content.

The flex: 1 isn't applied to flex item siblings.
It's applied to the children of those siblings (i.e., cousins).
Therefore, there's no association between the items with flex: 1, and there's no reason for them to be equal length.

This is the solution I come to
If an element has flex: 1 , this means the size of all of the other elements will have the same width as their content, but the element with flex: 1 will have the remaining full space given to it.
Soln
You can use grid grid-cols-{n} to equally distribute a row into n number of columns . I had shared the code below .
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.17/tailwind.min.css" rel="stylesheet" />
<section class="flex flex-wrap w-full justify-center items-center content-center mt-20 lg:mt-0 min-h-85 fade fadeout">
<div class="grid grid-cols-3 w-full md:w-1/3 max-w-md items-center bg-red-100">
<div class="bg-red-100"></div>
<div class="py-12 flex-1 bg-red-200 text-center">
<h4 class="font-semibold tracking-widest text-xs">Box 1</h4>
<p>Box 1 Flexbox 00000000</p>
</div>
<div class="bg-red-100"></div>
</div>
<div class="grid grid-cols-3 w-full md:w-1/3 max-w-md items-center bg-blue-100">
<div class="bg-blue-100"></div>
<div class="py-12 flex-1 bg-blue-200 text-center">
<h4 class="font-semibold tracking-widest text-xs">Box 2</h4>
<p>Box 2 Flexbox 0</p>
</div>
<div class="bg-blue-100"></div>
</div>
<div class="grid grid-cols-3 w-full md:w-1/3 max-w-md items-center bg-green-100">
<div class="bg-green-100"></div>
<div class="py-12 flex-1 bg-green-200 text-center">
<h4 class="font-semibold tracking-widest text-xs">Box 3</h4>
<p>Box 4 Flexbox 000</p>
</div>
<div class="bg-green-100"></div>
</div>
</section>
For more info refer the docs here

Sidebar with 3 grid layout next to it

I have a dashboard layout with a sidebar on the left, I would like some content right of the sidebar in a grid layout with 3 items
So far I have the dashboard
<div>
<div>
<div class=" flex flex-col inset-y-0 left-0 z-30 overflow-y-auto transition duration-300 transform bg-white w-60 dark:bg-gray-900 lg:translate-x-0 lg:static lg:inset-0">
<div class="flex items-center justify-center mt-8">
<div class="flex items-center">
<span class="text-2xl font-semibold text-gray-800 dark:text-white">Dashboard</span>
</div>
</div>
<nav class="flex flex-col px-4 mt-10 text-center">
Overview
Tickets
Ideas
Contacts
Settings
</nav>
</div>
<!-- the items i want to put in a 3 grid layout !-->
<div class="flex flex-wrap -mx-3 overflow-hidden sm:-mx-1 md:-mx-1 lg:-mx-2 xl:-mx-2">
<div class="my-3 px-3 w-1/3 overflow-hidden sm:my-1 sm:px-1 sm:w-full md:my-1 md:px-1 md:w-1/2 lg:my-2 lg:px-2 lg:w-1/3 xl:my-2 xl:px-2 xl:w-1/3">
#livewire('dashboard')
</div>
</div>
</div>
</div>
I tried a lot of things, most of them ended up with the dashboard covering up the images, now my images are always in the same column as the dashboard instead of centering in the middle liek they should.
See the image for a clearer picture

I created a demo for you.
<div class="flex">
<div class="flex w-60 bg-gray-200 h-96"></div>
<div class="flex flex-1 bg-blue-50">
<div class="grid grid-cols-3 gap-4">
<div class="col-span-1 bg-blue-200 w-48"></div>
<div class="col-span-1 bg-blue-200 w-48"></div>
<div class="col-span-1 bg-blue-200 w-48"></div>
<div class="col-span-1 bg-blue-200 w-48"></div>
</div>
</div>
</div>
Also, I recommend going through YouTube videos from Andre Madarang. He has some great content on Tailwind.

Similar to Digvjay, I put a demo together.
I used a fair bit of your original markup if that makes it easier to follow.
<div class="flex mt-8">
<!-- sidebar -->
<div class="flex flex-col w-60 dark:bg-gray-900">
<div class="flex items-center justify-center ">
<div class="flex items-center">
<span class="text-2xl font-semibold text-gray-800 dark:text-white">Dashboard</span>
</div>
</div>
<nav class="flex flex-col px-4 mt-10 text-center">
Overview
Tickets
Ideas
Contacts
Settings
</nav>
</div>
<!-- the items i want to put in a 3 grid layout !-->
<div class="p-4 grid grid-cols-3 gap-4 bg-gray-50 w-full">
<div class="bg-red-500 w-full"></div>
<div class="bg-red-500 w-full"></div>
<div class="bg-red-500 w-full"></div>
<div class="bg-red-500 w-full"></div>
</div>
</div>

Vertical align with Tailwind CSS across full screen div

How can I vertically align a div with Tailwind?
What I want:
-----------------------------------
| |
| |
| |
| item1 |
| item2 |
| |
| |
| |
-----------------------------------
What I currently have:
-----------------------------------
| item1 |
| item2 |
| |
| |
| |
| |
| |
| |
-----------------------------------
HTML
<div class="flex flex-col h-screen my-auto items-center bgimg bg-cover">
<h3 class="text-white">heading</h3>
<button class="mt-2 bg-white text-black font-bold py-1 px-8 rounded m-2">
call to action
</button>
</div>
CSS
.bgimg {
background-image: url('https://d1ia71hq4oe7pn.cloudfront.net/photo/60021841-480px.jpg');
}
I have successfully centered on the secondary axis (left-right) with class items-center. Reading the documentation, I tried align-middle but it does not work. I have confirmed the divs have full height and my-auto.
I'm using this version of Tailwind: https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css
Here is a JSFiddle: https://jsfiddle.net/7xnghf1m/2/

You can also do
<div class="flex h-screen">
<div class="m-auto">
<h3>title</h3>
<button>button</button>
</div>
</div>

Partly referencing #mythicalcoder 's solution but using only the necessary classes provided by TailwindCss (Version 1.8.+):
flex : To use a flex-div as container
h-screen : To size the container-height to the viewport height.
justify-center : To justify center (horizontal center) - main axis - Doc
items-center : To align the items to center (horizontal center) - cross axis - Doc
My Solution to center two text lines:
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex h-screen justify-center items-center">
<div class="text-center bg-blue-400"> <!-- ⬅️ THIS DIV WILL BE CENTERED -->
<h1 class="text-3xl">HEADING</h1>
<p class="text-xl">Sub text</p>
</div>
</div>

Justify-Center and Items-Center
While Anders' answer solves the problem for this particular case, I think it's important to note that using justify-center and items-center is circumstantial.
Let's have a look at one of the examples from the tailwind documentation.
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex justify-center bg-gray-100">
<div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">1</div>
<div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">2</div>
<div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">3</div>
</div>
As we can see the above code centers the elements horizontally. The reason for this is because the justify-center class centers the element on the flex container's main axis.
This means that if we were to change the main axis to 'column' then we would get a different result.
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex flex-col justify-center bg-gray-100">
<div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">1</div>
<div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">2</div>
<div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">3</div>
</div>
Justify-Center and Items-Center centers the elements on the main axis and the cross axis, and they can be used in place of each other. They are the opposites of each other and will produce different results depending on what the current main axis is.

According to the question, the "Items1", "Items2" should be both horizontally and vertically aligned.
Horizontal => text-center/justify-center
Vertical => items-center
Here is a sample code for producing a view similar to the ASCII image in the question.
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
<div class="relative h-32 bg-blue-400">
<div class="absolute inset-0 flex items-center justify-center">
Item 1
<br>
Item 2
</div>
</div>

I have tried to summarize different occurances of centering the divs
Center divs in Column
For fit width
<div class="bg-yellow-400 flex flex-col h-screen justify-center items-center">
<div className="bg-green-500 p-2">item 1</div>
<div className="bg-pink-500 p-2">item 2</div>
</div>
For full width
<div class="bg-yellow-400 flex flex-col h-screen justify-center items-center">
<div className="bg-green-500 p-2 w-full flex justify-center">
item 1
</div>
<div className="bg-pink-500 p-2 w-full text-center">item 2</div>
</div>
Extra:
Center vertically split divs
<div class="flex h-screen flex-col">
<div class="flex flex-1 items-center justify-center bg-green-500 p-2 text-4xl">
<div class="bg-yellow-400 p-6">Item 1</div>
</div>
<div class="flex flex-1 items-center justify-center bg-pink-500 p-2 text-4xl"><div class="bg-amber-400 p-6">Item 2</div></div>
</div>
Center horizontally split divs
<div class="flex h-screen">
<div class="flex flex-1 items-center justify-center bg-green-500 p-2 text-4xl">
<div class="bg-yellow-400 p-6">Item 1</div>
</div>
<div class="flex flex-1 items-center justify-center bg-pink-500 p-2 text-4xl"><div class="bg-amber-400 p-6">Item 2</div></div>
</div>
Center divs in Row
For fit height
<div>
<div class="flex h-screen items-center justify-center bg-yellow-400">
<div class="flex justify-center bg-green-500 p-2">item 1</div>
<div class="bg-pink-500 p-2 text-center">item 2</div>
</div>
</div>
For full height
<div>
<div class="flex h-screen items-center justify-center bg-yellow-400">
<div class="flex h-full items-center bg-green-500 p-2">item 1</div>
<div class="flex h-full items-center bg-pink-500 p-2">item 2</div>
</div>
</div>

#bastiotutuama's answer is already good, however if there are other surrounding items then use align self utilities instead of items-center. source
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
<div class="bg-blue-500 flex justify-center h-screen">
<div class="bg-red-300 self-start">
<h1>
Let us get you off the board <br>
<span>Pursue what you wanted</span>
</h1>
<div class="mt-2 flex items-center">
Get started
Learn more
</div>
</div>
<div class="bg-yellow-300 self-center">
<h1>
Let us get you off the board <br>
<span>Pursue what you wanted</span>
</h1>
<div class="mt-2 flex items-center">
Get started
Learn more
</div>
</div>
<div class="bg-red-300 self-end">
<h1>
Let us get you off the board <br>
<span>Pursue what you wanted</span>
</h1>
<div class="mt-2 flex items-center">
Get started
Learn more
</div>
</div>
</div>

You have another choice which is grid and can do
<div class="grid justify-items-center items-center h-screen">
<div>
<h3>title</h3>
<button>button</button>
</div>
</div>

Navigation using React
<nav className="flex gap-8 items-center justify-center">
<Link className=''>SHOP</Link>
<Link className=''>BACKPACK</Link>
</nav>

For vertical center in Tailwind Grid
use class name:
self-center
<div class="self-center">

you can do
<div class="flex justify-center items-center flex-col">
<p>Item 1</p>
<p>Item 2</p>
</div>
However, this approach requires flexbox.

I did it this way and it works.
<div class="grid grid-cols-3 h-screen">
<div class="bg-red-400 col-span-3 sm:col-span-1 flex">
<div class="bg-blue-300 m-auto">
<h1>hello</h1>
</div>
</div>
<div class="col-span-3 bg-red-50 sm:col-span-2"></div>
See image

Use class justify-center to align on the main axis. align-middle operates on the cross axis.

Resources