I have the following code:
<div class="grid grid-cols-5 divide-x divide-gray-700 text-center">
<div>Col</div>
<div>Col</div>
<div>Col</div>
<div>Col</div>
<div>Col</div>
</div>
<div class="grid grid-cols-5 gap-4">
<div class="h-20 border bg-gray-300"></div>
<div class="h-20 border bg-gray-300"></div>
<div class="h-20 border bg-gray-300"></div>
<div class="h-20 border bg-gray-300"></div>
<div class="h-20 border bg-gray-300"></div>
</div>
https://play.tailwindcss.com/TLsKEicCOa
That generates this:
How can I make the vertical borders and the boxes align?
Note: I need two grids, I can't just use one.
Since I couldn't solve the issue, I decided to research it for you. Actually, this issue was a problem and it needed to make a few changes. You can find solutions for this issue here. But still I have a short solution for you as follows. If we give a margin to all child elements, there seems to be no problem. As you wish...
<div class="grid grid-cols-5 divide-x divide-gray-700 text-center">
<div>Col</div>
<div>Col</div>
<div>Col</div>
<div>Col</div>
<div>Col</div>
</div>
<div class="grid grid-cols-5 [&>*]:mx-2">
<div class="h-20 border bg-gray-300"></div>
<div class="h-20 border bg-gray-300"></div>
<div class="h-20 border bg-gray-300"></div>
<div class="h-20 border bg-gray-300"></div>
<div class="h-20 border bg-gray-300"></div>
</div>
<script src="https://cdn.tailwindcss.com"></script>
Related
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 want to create a <hr> divider using Tailwind CSS, but instead of the horizontal rule spanning the entire width of the page unbroken, I want to add some text in the middle.
For example:
----------------------------------- Continue -----------------------------
I can't find anything like this in the documentation. How can I achieve this effect?
If necessary, I can change the HTML to something other than an <hr> element. That was just the only way I knew how to create a horizontal rule.
You can use this HTML syntax to create what you want :
<div class="relative flex py-5 items-center">
<div class="flex-grow border-t border-gray-400"></div>
<span class="flex-shrink mx-4 text-gray-400">Content</span>
<div class="flex-grow border-t border-gray-400"></div>
</div>
See here the result: https://play.tailwindcss.com/65JULZ5XES
Try this instead...
<script src="https://cdn.tailwindcss.com"></script>
<div class="relative py-4">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-b border-gray-300"></div>
</div>
<div class="relative flex justify-center">
<span class="bg-white px-4 text-sm text-gray-500">Continue</span>
</div>
</div>
Example
https://play.tailwindcss.com/Yx4OmAlBsv
Yes, you can do this:
<script src="https://cdn.tailwindcss.com"></script>
<h1 class="text-center overflow-hidden before:h-[1px] after:h-[1px] after:bg-black
after:inline-block after:relative after:align-middle after:w-1/4
before:bg-black before:inline-block before:relative before:align-middle
before:w-1/4 before:right-2 after:left-2 text-xl p-4">Heading
</h1>
Try this.
Need to adjust the height, margin, bg-color, etc. to fit your website.
https://play.tailwindcss.com/FzGZ1fMOEL
<div class="h-5 border-b-4 border-black text-2xl text-center">
<span class="bg-white px-5">your text</span>
</div>
I don't know how do I explain but I want my grid to perfectly fit this blackboard and even when I change the size of the window it should stay with equal spacing and with their respective hieght and width
this is my code https://play.tailwindcss.com/KBxI7wvDJA
this is how i want
when i reduce the window size it become like this
If you set the container's width, then the grid won't re-size and gaps wont' change.
From the devtools I see the container width as 464px.
So you can apply min-w-[464px] to the container.
Demo: https://play.tailwindcss.com/JXqBPk45Mj
<div class="relative">
<div class="board h-screen"></div>
<-- 👇 -->
<div class="min-w-[464px] grid grid-cols-3 gap-x-28 gap-y-12 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<div class="h-20 w-20 bg-pink-400 text-center"></div>
<div class="h-20 w-20 bg-pink-400 text-center"></div>
<div class="h-20 w-20 bg-pink-400 text-center"></div>
<div class="h-20 w-20 bg-pink-400 text-center"></div>
<div class="h-20 w-20 bg-pink-400 text-center"></div>
<div class="h-20 w-20 bg-pink-400 text-center"></div>
<div class="h-20 w-20 bg-pink-400 text-center"></div>
<div class="h-20 w-20 bg-pink-400 text-center"></div>
<div class="h-20 w-20 bg-pink-400 text-center"></div>
</div>
</div>
i created a page layout with tailwind css with help of the flex utilities. Now i struggle with one issue.
On the right side there is a header section with title and description.
I want now that the description is never taking more than 100% of the width and automatically truncates the text if it has more.
I prepared a working example to demonstrate my problem:
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex bg-blue-100 h-screen">
<div class="bg-green-100 w-16 flex-none">A</div>
<div class="bg-blue-100 w-96 flex-none">SB</div>
<div class="bg-red-100 flex-auto">
<div class="flex flex-col">
<div class="flex flex-col space-y-2 bg-pink-100 p-3">
<h1 class="bg-yellow-100">Title</h1>
<h2 class="bg-yellow-200 truncate">Description: the text of this title should automatically truncate but it should never use more than 100% of the parent element</h2>
</div>
<div class="bg-pink-200 p-3">...</div>
</div>
</div>
</div>
It would be super nice if someone could help my by solving this problem.
Many thanks in advance
Kai
Just add 'overflow-hidden' to your third column.
<div class="flex bg-blue-100 h-screen">
<div class="bg-green-100 w-16 flex-none">A</div>
<div class="bg-blue-100 w-96 flex-none">SB</div>
<div class="bg-red-100 flex-auto overflow-hidden">
<div class="flex flex-col">
<div class="flex flex-col space-y-2 bg-pink-100 p-3">
<h1 class="bg-yellow-100">Title</h1>
<h2 class="bg-yellow-200 truncate">Description: the text of this title should automatically truncate but it should never use more than 100% of the parent element</h2>
</div>
<div class="bg-pink-200 p-3">...</div>
</div>
</div>
</div>
I suggest you
use overflow-ellipsis together overflow-hidden, that will help you description is never taking more than 100% of the width, even help for responsive design on the tablet mode(768px) easily
<div class="flex flex-col space-y-2 bg-pink-100 p-3 ">
<h1 class="bg-yellow-100">Title</h1>
<h2 class="bg-yellow-200 overflow-clip overflow-hidden">Description: the text of this title should automatically truncate but it should never use more than 100% of the parent element</h2>
</div>
I hope helped you
I'm just getting started with tailwind and I would like to grid essentially a row of images that fit the container.
Currently I am just stubbing in 2 photos for testing/getting to know tailwind purposes.
<main class="mt-12 lg:mt-32">
<section class="container mx-auto px-6">
<div class="w-full lg:flex items-center">
<div *ngFor="let item of photos">
<p class="text-md lg:text-xl font-light text-gray-800 mb-8">
{{item.description}}
</p>
<div class="grid grid-col-2 gap-2">
<img [src]="image" *ngFor="let image of item.images"
class="object-contain shadow rounded border-none">
</div>
</div>
</div>
</section>
</main>
This code is causing the 2 images to essentially appear underneath each other as seen here
https://i.imgur.com/vhSBkc7.png
Thank you for any help.
Your class should me grid-cols-2 and the img tag should have col-span-1. Checkout Grid Columns
<div class="grid grid-cols-2 gap-2"> // grid-cols-2
<img [src]="image" *ngFor="let image of item.images" class="col-span-1 object-contain shadow rounded border-none"> // col-span-1
</div>