I have a simple flex div with many children. I want 3 elements on each row using tailwindcss.
Is there a way to accomplish this using just tailwindcss classes? I tried with gap-4 on my parent div and child elements with w-1/3, but it adds margin to the children elements, breaking the row after the second element:
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.7/tailwind.min.css" rel="stylesheet"/>
<div class="flex flex-wrap gap-4 mb-6">
<div class="w-1/3 shadow border rounded p-4">
My element
</div>
<div class="w-1/3 shadow border rounded p-4">
My element
</div>
<div class="w-1/3 shadow border rounded p-4">
My element
</div>
<div class="w-1/3 shadow border rounded p-4">
My element
</div>
</div>
How can I add a gap between the child elements, breaking the line only after every third element (in short: I want a 3 column div)?
This is a grid job
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.7/tailwind.min.css" rel="stylesheet"/>
<div class="grid-cols-3 grid gap-4 mb-6">
<div class="shadow border rounded p-4">
My element
</div>
<div class="shadow border rounded p-4">
My element
</div>
<div class="shadow border rounded p-4">
My element
</div>
<div class="shadow border rounded p-4">
My element
</div>
</div>
You also can use the space between utility space-x-{amount} if you want to keep using flex instead of grid:
<div class="flex space-x-4 ...">
<div>01</div>
<div>02</div>
<div>03</div>
</div>
More details here
Related
I'm having immense trouble understanding the concept of div height and overflow. Been searching for two days but I think I'm missing a key concept here...
My layout looks like this (Tailwind Playground):
The blue div does not scroll all the way to the end of the content. For some reason the div thinks that its height is larger than it really is (by exactly the height of the second navbar (red) on top of it). As a result, I can't scroll all the way to the bottom.
Also, having to repeat h-full for each child div until I reach the div that I want to be scrollable seems off to me but otherwise it assumes h-auto which is not good.
<div class="h-screen overflow-hidden">
<div class="flex h-full flex-col overflow-hidden">
<div class="w-full bg-slate-500 text-center text-white h-12 ">NAVBAR</div>
<div class="flex h-full overflow-hidden">
<div class="flex h-full basis-1/6">
<div class="w-full bg-gray-300 text-center text-black">Sidebar</div>
</div>
<div class="flex h-full grow flex-col bg-slate-500">
<div class="h-12 w-full shrink-0 bg-red-400 text-center">Second Navbar</div>
<div class="h-full w-full grow bg-green-400">
<div class="flex h-full">
<div class="w-1/3 bg-blue-400 text-center">
<div class="flex h-full flex-col overflow-y-scroll">
<div>
Lorem....
</div>
</div>
</div>
<div class="h-full w-2/3 overflow-y-scroll bg-orange-400 text-center">Main content</div>
</div>
</div>
</div>
</div>
</div>
</div>
Lets look at the container(blue parent) under the second navbar. Its parent (the parent of the second navbar as well) have a height of about 831px. The navbar height is 3rem - which is about 48px.
But the blue parent has a height of 100% (of its parent) ~ 831px. So its basically overflowing (because 831+48 != 831).
If you put the overflow:hidden on the blue parent it'll hide the overflowing and blue container will scroll normally.
https://play.tailwindcss.com/SOO2rwiGsw
I have the following problem with Tailwind CSS and the truncate helper.
The code for the following image:
<div class="w-full flex items-center flex-wrap gap-y-2">
<!-- The problem is here. This is correctly cut if longer than max-w-xs, -->
<!-- but the shortest words get cut even tho they have space to grow. -->
<h1 class="mr-auto max-w-xs truncate font-semibold text-2xl text-gray-800 leading-tight md:mr-6">
Audience
</h1>
<!-- Middle nav div -->
<div class="mr-auto">
... nav here
</div>
<!-- Right side buttons -->
<div class="flex flex-wrap">
... buttons
</div>
</div>
Removing the flex class from the parent fixes the truncate issue, but I obviously need the flex to put the 3 elements inline and wrap in smaller screens.
Any ideas? Thanks!
I tested this on my system and the Audience doesn't get truncated. Maybe you have a flex or grid above this one that's effecting it?
<div class="w-full flex items-center flex-wrap gap-y-2">
<h1 class="mr-auto max-w-xs truncate font-semibold text-2xl text-gray-800 leading-tight md:mr-6">Audience</h1>
<div class="mr-auto">... nav here</div>
<div class="flex flex-wrap">... buttons</div>
</div>
I using tailwind-overflow, for horizontal scroll in right side.
Bellow example of my code:
<div className="bg-red-300">
<div className="bg-red-400">
<div className="container mx-auto pl-3 pr-3 pt-6 pb-6 flex space-x-2 overflow-x-auto">
<div className="flex space-x-2">
<div>Explore:</div>
<div className="font-bold underline">Shoes</div>
<div className="font-bold underline">Clothing</div>
<div className="font-bold underline">Accessories</div>
<div className="font-bold underline">Premium</div>
<div className="font-bold underline">Sport</div>
<div className="font-bold underline">Shop All</div>
</div>
</div>
</div>
</div>
#1 Why word Shop All was break, when screen is mobile? How fix is it?
screenshot:
demo: https://superb-pothos-b7b687.netlify.app/tailwind-overflow
#2 How I can hide scroll in tailwind?
#1 Whitespace
In order to disable the breaking of your words, you can simply use Whitespace.
It looks like the class you might want to use here is whitespace-nowrap. You can either apply it to your whole document or simply to a specific div:
<div className="font-bold underline whitespace-nowrap">Shop All</div>
#2 Hide Scroll-bar
To hide the scrollbar you can use Overflow.
overflow-hidden will hide both horizontal and vertical scrollbars.
overflow-x-hidden will hide the horizontal scrollbar (which is what you need here).
overflow-y-hidden will hide the vertical scrollbar.
In your code it can be implemented this way:
<div className="container mx-auto pl-3 pr-3 pt-6 pb-6 flex space-x-2 overflow-x-auto overflow-hidden">
styles that need to be implemented
As shown,How to use tailwindcss to achieve the following styles?Many thanks
The styles I implemented are as follows
The styles I implemented, are not correct
<div class="p-4 bg-white shadow flex flex-wrap divide-x divide-y">
<div class="p-4 text-center w-1/3">1</div>
<div class="p-4 text-center w-1/3">1</div>
<div class="p-4 text-center w-1/3">1</div>
<div class="p-4 text-center w-1/3">1</div>
<div class="p-4 text-center w-1/3">1</div>
</div>
Instead of using flex box, you might be better off using CSS grid instead via the grid class. You can then use gap-px to specify a 1px gap between all your grid cells.
To have the colors 1px border, it is just a matter of setting the background color on the parent grid element, e.g. using the bg-gray-200 class.
To get the border radius, you can use rounded-lg. Use overflow-hidden to ensure children elements are properly clipped.
See proof-of-concept below:
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet" />
<!-- Top level div only for display purposes -->
<div class="w-screen h-screen grid place-items-center">
<div class="shadow-xl grid grid-cols-3 gap-px bg-gray-200 rounded-lg overflow-hidden">
<div class="px-16 py-8 bg-white text-center">1</div>
<div class="px-16 py-8 bg-white text-center">2</div>
<div class="px-16 py-8 bg-white text-center">3</div>
<div class="px-16 py-8 bg-white text-center">4</div>
<div class="px-16 py-8 bg-white text-center">5</div>
<div class="px-16 py-8 bg-white text-center">6</div>
</div>
</div>
I have a div with 5 child divs. There is no content, it's just there to visually display a percentage. I have set a width and height on the parent and I want to find the easiest way to make the children equally fill that width. I can do this by adding flex-grow to each child but ideally I'd love to be able to control that from the parent.
NB: Code is using tailwindcss
<div class="flex w-64 h-2">
<div class="flex-grow mr-1 rounded-l-lg bg-blue-dark"></div>
<div class="flex-grow mr-1 bg-blue-dark"></div>
<div class="flex-grow mr-1 bg-blue-dark"></div>
<div class="flex-grow mr-1 bg-blue-dark"></div>
<div class="flex-grow rounded-r-lg bg-gray-lighter"></div>
</div>
You have "flexbox" in title but you did not mentioned in question that you actually you are forced to use flexboxes, just need to achieve equal divs.
So the best approach will be using grid instead of flex, because it is just designed for that.
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<div class="grid grid-flow-col w-64 h-2">
<div class="bg-blue-500"></div>
<div class="bg-red-500"></div>
<div class="bg-green-500"></div>
<div class="bg-orange-500"></div>
<div class="bg-gray-500"></div>
</div>