I'm trying to add / style 3 boxes stacked on top of each other and then attach an image to it as such
https://i.stack.imgur.com/jVdIo.png
I was able to achieve this but it's leaning side ways
https://i.stack.imgur.com/fl0Zz.png
<div className='flex flex-col box-border rounded strok h-60 w-48 p-4 border-2 ...'>
<div className=' box-border rounded strok h-32 w-32 p-4 border-8 bg-black ...'>
<div className=' box-border rounded strok h-32 w-32 p-4 border-8 bg-black ...'>
<div className=' box-border rounded strok h-32 w-32 p-4 border-8 bg-black ...'></div>
</div>
</div>
</div>
You have all the boxes nested with padding. Since they're nested, they're considered children. The parents have padding. Consider having a parent with a position of relative and the 3 boxes having a position of absolute.
<div class="h-screen w-screen bg-gray-200 py-20 flex justify-center items-center sm:py-12">
<div class="h-40 w-40 relative">
<div class="rounded h-[150px] w-[150px] bg-red-700 absolute z-30 left-1">
</div>
<div class="rounded h-[150px] w-[134px] bg-slate-500 absolute z-20 top-3 left-3"></div>
<div class="rounded h-[142px] w-[118px] bg-black absolute z-10 top-8 left-5"></div>
I made an example for you on tailwind playground https://play.tailwindcss.com/MJnaFMVio6
This is how to implement that:
<!-- Background -->
<div class="mx-auto h-[500px] w-[500px] flex justify-center items-center bg-blue-500 relative p-[10px]">
<!-- Boxes container -->
<div class="relative">
<div class="relative mt-4 mx-4 h-full">
<!-- Boxes stacked behind -->
<div class="absolute -bottom-4 scale-[0.85] origin-bottom inset-x-0 h-full w-full bg-white/40 backdrop-blur-md rounded-2xl"></div>
<div class="absolute -bottom-2 scale-95 origin-bottom inset-x-0 h-full w-full bg-white/40 backdrop-blur-md rounded-3xl shadow-sm"></div>
<!-- Box on top -->
<div class="p-4 bg-white/60 backdrop-blur-md rounded-3xl h-full">
<img class="rounded-[20px]" src="https://variety.com/wp-content/uploads/2021/07/Rick-Astley-Never-Gonna-Give-You-Up.png">
</div>
</div>
</div>
</div>
On Tailwind play: https://play.tailwindcss.com/dmU2c4ai36
Related
I am struggeling while trying to center my content vertical and horizontal within a nested div with tailwindcss.
<div class="flex flex-col items-center min-h-screen">
<header class="flex-none text-center w-full">
<p>Header</p>
</header>
<div class="grow w-full">
<div id="home" class="flex justify-center item-center min-h-max">
<main>
<p>Shall be vertical and horizontal center.</p>
</main>
</div>
</div>
<footer class="flex-none text-center m-2 w-full">
<hr class="mx-auto mb-2 sm:w-56 w-36 h-0.5 bg-gray-100 rounded border-0 shadow-2xl" />
<div class="flex sm:flex-row flex-col sm:gap-4 gap-1 justify-center text-sm font-light">
<p>Footer<p>
</div>
</footer>
</div>
The code is also wrapped up here: https://play.tailwindcss.com/5B2w0RGQzm?size=540x1014
I already tried different height and min-height classes, but I am still failing...
https://tailwindcss.com/docs/height
https://tailwindcss.com/docs/min-height
What is the right approach to align everything centered?
try to dispatch your class otherwise and allow yourself to set flex (#child) into flex (from parent) , so it respects your idea and uses flex grid properties through your DOM levels.
Possible example below if i understood your issue:
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-col items-center min-h-screen" style="">
<header class="flex-none text-center w-full">
<p>Header</p>
</header>
<div class="flex flex-column grow w-full justify-center items-center">
<div id="home">
<main>
<p>Shall be vertical and horizontal center.</p>
</main>
</div>
</div>
<footer class="flex-none text-center m-2 w-full">
<hr class="mx-auto mb-2 sm:w-56 w-36 h-0.5 bg-gray-100 rounded border-0 shadow-2xl" />
<div class="flex sm:flex-row flex-col sm:gap-4 gap-1 justify-center text-sm font-light">
<p>Footer at bottom <p>
</div>
</footer>
</div>
other possible example:
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-col items-center min-h-screen" style="">
<header class="flex-none text-center w-full">
<p>Header</p>
</header>
<div class="flex grow ">
<div id="home" class="flex grow ">
<main class="flex flex-column grow w-full justify-center items-center">
<p>Shall be vertical and horizontal center.</p>
</main>
</div>
</div>
<footer class="flex-none text-center m-2 w-full">
<hr class="mx-auto mb-2 sm:w-56 w-36 h-0.5 bg-gray-100 rounded border-0 shadow-2xl" />
<div class="flex sm:flex-row flex-col sm:gap-4 gap-1 justify-center text-sm font-light">
<p>Footer at bottom
<p>
</div>
</footer>
</div>
Hi I'm designing a grid system in NextJS using Tailwind.
I'm having trouble auto sizing the grids to fit the size of the parent element.
Below are two images to help convey my meaning.
Mockup wireframe of the container and grids. (Red = Wrapper, Pink = Layout, Purple = Grids)
What I've managed to code, (I want to resize the right hand boxes to the height of the window.)
<div className="bg-white dark:bg-custom05 md:fixed md:inset-y-0 md:left-0 md:flex md:items-start md:overflow-y-auto md:w-full ">
<div className="min-h-full md:flex md:w-16 md:flex-none md:items-center md:whitespace-nowrap md:py-12 md:leading-7 md:[writing-mode:vertical-rl]">
<div className="flex justify-between text-sm gap-12">
<div className="sm:w-14 sm:h-14 md:w-14 md:h-14 rounded-lg flex items-center justify-center bg-custom03 order-1">Avatar</div>
<div className="sm:w-60 sm:h-14 md:w-14 md:h-60 rounded-lg flex items-center justify-center bg-custom03 order-2">Author Tag Line</div>
<div className="sm:w-14 sm:h-14 md:w-14 md:h-14 rounded-lg flex items-center justify-center bg-custom03 order-3">03</div>
</div>
</div>
<div className="bg-white dark:bg-custom06 relative z-10 mx-auto p-10 md:max-w-md md:min-h-full md:flex-auto md:border-x md:border-custom07">
<div className="grid grid-row-3 grid-flow-row gap-12 text-sm text-center rounded-lg ">
<div className="p-4 rounded-lg bg-custom03 grid place-content-center row-span-6">01</div>
<div className="p-4 rounded-lg bg-custom03 grid place-content-center row-span-6">02</div>
<div className="p-4 rounded-lg bg-custom03 grid place-content-center row-span-6">03</div>
</div>
</div>
<div className="bg-white dark:bg-custom05 relative z-9 p-10 mx-auto md:max-h-full md:flex-auto ">
<div className="grid grid-col-2 grid-flow-col gap-12 text-sm text-center rounded-lg ">
<div className="p-4 rounded-lg bg-custom03 grid place-content-center col-span-2">01</div>
<div className="p-4 rounded-lg bg-custom03 grid place-content-center row-span-2 col-span-2">02</div>
<div className="p-4 rounded-lg bg-custom03 grid place-content-center row-span-3">03</div>
</div>
</div>
</div>
Answer Result & Refactor
Thanks to MagnusEffect's help I've been able solve the problem.
Ended up changing some of his styling and made sure to set the padding, gaps and other minor changes, hover its worked fantasticly!
You can use the flex properties to create the following grid systems like this.
<script src="https://cdn.tailwindcss.com"></script>
<div class=" border-red-600 border-2 p-3 flex flex-row items-center space-x-2">
<div class=" p-4 border-pink-500 border-2 h-screen space-y-2 items-center w-1/12 flex flex-col">
<div class=" border-purple-500 border-2 h-20 ">Av</div>
<div class=" border-purple-500 border-2 h-72">ot</div>
</div>
<div class=" p-4 border-pink-500 border-2 h-screen w-4/12 flex flex-col space-y-2">
<div class="p-3 border-purple-500 border-2 h-48">Video</div>
<div class="p-3 border-purple-500 border-2 h-24">Description</div>
<div class="p-3 border-purple-500 border-2 h-48">Github, Socials</div>
</div>
<div class=" p-4 border-pink-500 border-2 h-screen w-7/12 space-x-4 flex flex-row items-center">
<div class="flex flex-col space-y-2 w-1/2 h-full">
<div class="border-purple-500 border-2 h-full p-4">Projects</div>
<div class="border-purple-500 border-2 h-full p-4">Empty </div>
</div>
<div class="p-6 border-purple-500 border-2 w-1/2 h-full ">
Study/Work
</div>
</div>
</div>
Note:
Replace class= with className= in Reactjs.
View the demo in fullPage
Try h-screen or h-fit or you can add custom sizing h-[] in the square brackets you can add any sizing (px, vh) etc.
I'm having trouble getting the right, "Scroll independently", div, to scroll independently of its sibling div to its left. I would like to be able to do this without changing anything outside of the <!-- CONTENT START --> <!-- CONTENT END --> comments. It seems to be close, but I'm stuck. The "Scroll" and "Scroll independently" div's always scroll together. I'm running this in https://play.tailwindcss.com/
Any help would be greatly appreciated.
<div class="flex bg-gray-100 justify-center">
<div class="flex flex-col w-full max-w-5xl pb-7">
<nav class="sticky top-0 flex items-center justify-between bg-gray-700 text-white h-16 z-40 p-2">
<div class="flex w-1/3">
{Left}
</div>
<div class="flex justify-center w-1/3">
{Middle}
</div>
<div class="flex justify-end items-center w-1/3 gap-2">
{Right}
</div>
</nav>
<!-- CONTENT START -->
<div class="flex">
<div class="w-2/3">
<div class="sticky top-16 w-full h-20 mb-2 bg-green-500">
Don't scroll
</div>
<div class="w-full h-96 mb-2 bg-red-500">
Scroll
</div>
</div>
<div class="w-1/3 mb-2 h-[1000px] bg-pink-400">
Scroll independently
</div>
</div>
<!-- CONTENT END -->
<footer class="fixed inset-x-0 bottom-0 z-50 bg-gray-700 h-7">
<div class="flex items-center justify-end px-8 pt-1">
<div class="text-sm text-white">{versionStr}</div>
</div>
</footer>
</div>
</div>
This cleaned it up nicely:
https://play.tailwindcss.com/Dbd5vnExhk
<div class="flex bg-gray-100 justify-center">
<div class="flex flex-col w-full max-w-5xl pb-7">
<nav class="sticky top-0 flex items-center justify-between bg-gray-700 text-white h-16 z-40 p-2">
<div class="flex w-1/3">
{Left}
</div>
<div class="flex justify-center w-1/3">
{Middle}
</div>
<div class="flex justify-end items-center w-1/3 gap-2">
{Right}
</div>
</nav>
<!-- CONTENT START -->
<div class="flex">
<div class="w-2/3">
<div class="sticky top-16 w-full h-20 bg-green-500">
Don't scroll
</div>
<div class="w-full h-[2000px] bg-gradient-to-b from-red-300 to-red-800">
Scroll
</div>
</div>
<div class="w-1/3 h-[calc(100vh-5.75rem)] sticky top-16 overflow-y-scroll overscroll-contain bg-pink-400">
<div class="h-[1000px]">
Scroll independently
</div>
</div>
</div>
<!-- CONTENT END -->
<footer class="fixed inset-x-0 bottom-0 z-50 bg-gray-700 h-7">
<div class="flex items-center justify-end px-8 pt-1">
<div class="text-sm text-white">{versionStr}</div>
</div>
</footer>
</div>
</div>
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>
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.