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>
Related
I'm using Tailwind CSS and React to build an app, and in one of view I have a grid of cards. Currently it looks something like this:
As you can see, the cards squeeze in as I make the window smaller. I want to ensure that the cards size (width and height) always stays the same, and it just moves to the next row if the amount of cards don't fit on one row as the window gets smaller.
Something like (made in MS paint):
Where the size of the cards stay fixed (same aspect ratio) even though the screen is getting smaller.
Here's how my code looks currently:
Grid:
<div>
<ul className="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-4 md:grid-cols-6 md:gap-4 lg:grid-cols-8 lg:gap-4">
{props.trips.map((trip: TTrip) => (
<TripCard trip={trip} href={currentPath + trip.id} />
))}
</ul>
</div>
Card:
<li
key={props.trip.id}
className="card card-compact shadow-xl col-span-1 w-128 h-fit bg-gray-100 hover:bg-base-200"
>
<div className="relative w-128 h-32">
<Image src="https://placeimg.com/500/225/arch" layout="fill" objectFit="cover" />
</div>
<div className="card-body">
<h2 className="card-title">{props.trip.name}</h2>
<h2>Time - Time</h2>
</div>
</li>
Any idea how to set this up using tailwind-css?
I know you wanted to set this up using Grid, but unfortunately, it is not the right tool for this job. Flexbox would be best suited for your needs.
Here is a tailwind playground that shows your desired output. The playground I linked doesn't use NextJS, as it does in your example. So, I have modified a few things such as images, as they are non-NextJS specific.
I have modified the styling a bit, in a way I felt is more efficient. Namely, I have moved the width setting from the image, to the container div. You can further modify this setup, as per your requirement.
In your setup, the code would translate roughly like this.
// Grid
<div>
<ul className="flex flex-row gap-4 flex-wrap">
{props.trips.map((trip: TTrip) => (
<TripCard trip={trip} href={currentPath + trip.id} />
))}
</ul>
</div>
// Card
<li
key={props.trip.id}
className="card card-compact shadow-xl col-span-1 w-32 md:w-72 lg:w-96 h-fit bg-gray-100 hover:bg-base-200"
>
<div className="relative h-32">
<Image src="https://placeimg.com/500/225/arch" layout="fill" objectFit="cover" />
</div>
<div className="card-body">
<h2 className="card-title">{props.trip.name}</h2>
<h2>Time - Time</h2>
</div>
</li>
Here's how it would look:
Largest with wrapping
Medium without wrapping
Small without wrapping
Small with wrapping
The exact breakpoints where the size and wrapping changes, depends on how you decide to implement it. If you are unhappy with the above points, you can simply modify the lg, md prefixes, as per your needs.
The simplest way of getting this done is via flex and flex-wrap and setting fixed desired height and width for the cards
Code Structure:
<div class="flex flex-wrap"> 👈 Use flex flex-wrap
<card>
<card>
<card>
</div>
Tailwind-play
Code:
<div class="flex flex-wrap">
<div class="w-56 rounded-lg bg-gray-200 shadow-lg">
<div class="h-40"><img src="https://placeimg.com/500/225/hous" class="h-full" /></div>
<div class="pl-2 text-4xl">Title</div>
<div class="pl-2 text-2xl">Subtitle</div>
</div>
<div class="w-56 rounded-lg bg-gray-200 shadow-lg">
<div class="h-40"><img src="https://placeimg.com/500/225/hous" class="h-full" /></div>
<div class="pl-2 text-4xl">Title</div>
<div class="pl-2 text-2xl">Subtitle</div>
</div>
<div class="w-56 rounded-lg bg-gray-200 shadow-lg">
<div class="h-40"><img src="https://placeimg.com/500/225/hous" class="h-full" /></div>
<div class="pl-2 text-4xl">Title</div>
<div class="pl-2 text-2xl">Subtitle</div>
</div>
<div class="w-56 rounded-lg bg-gray-200 shadow-lg">
<div class="h-40"><img src="https://placeimg.com/500/225/hous" class="h-full" /></div>
<div class="pl-2 text-4xl">Title</div>
<div class="pl-2 text-2xl">Subtitle</div>
</div>
<div class="w-56 rounded-lg bg-gray-200 shadow-lg">
<div class="h-40"><img src="https://placeimg.com/500/225/hous" class="h-full" /></div>
<div class="pl-2 text-4xl">Title</div>
<div class="pl-2 text-2xl">Subtitle</div>
</div>
<div class="w-56 rounded-lg bg-gray-200 shadow-lg">
<div class="h-40"><img src="https://placeimg.com/500/225/hous" class="h-full" /></div>
<div class="pl-2 text-4xl">Title</div>
<div class="pl-2 text-2xl">Subtitle</div>
</div>
<div class="w-56 rounded-lg bg-gray-200 shadow-lg">
<div class="h-40"><img src="https://placeimg.com/500/225/hous" class="h-full" /></div>
<div class="pl-2 text-4xl">Title</div>
<div class="pl-2 text-2xl">Subtitle</div>
</div>
</div>
Output in different screens:
I have a Vue3 carousel inside a Single file component
package.json
"vue3-carousel": "^0.1.40"
SFC
import { Carousel, Slide, Navigation } from 'vue3-carousel';
import 'vue3-carousel/dist/carousel.css';
import '#/assets/scss/Carousel.scss';
<Carousel :wrap-around="true" class="box-carousel" :autoplay="2000" :transition="500">
<Slide v-for="slide in slides" :key="slide.id">
<div class="mx-auto w-[85%] md:w-[90%] rounded-lg p-5 bg-blue-secondary-5 h-full dark:bg-blue-secondary-5 dark:text-black-dark-100">
<!-- Box Description -->
<div class="grid grid-cols-5 gap-5 mb-5">
<div class="col-span-1">
<div class="rounded-full h-11 w-11 bg-black-20 flex items-center justify-center">
<p class="uppercase font-bold text-sm">{{slide.title}}</p>
</div>
</div>
<div class="col-span-4 text-left">
<div class="ml-3 md:ml-0">
<p class="font-bold">{{slide.name}}</p>
<p class="text-black-40 text-xs">{{slide.date}}</p>
</div>
</div>
</div>
<!-- End Box Description -->
<!-- Box Comment -->
<div class="text-left mb-8">
<p class="text-sm ">
{{slide.comment.substring(0,130)}}
</p>
</div>
<!-- End Box Comment -->
<!-- Box Actions -->
<div class="grid grid-cols-6 gap-5 absolute bottom-5">
<div class="col-span-2">
<a href="javascript:void(0)" class="flex items-center text-xs md:text-sm relative top-1 text-blue-secondary-100">
<UndoIcon width="10" class="fill-blue-secondary-100 mr-2 hidden md:block" />
Responder
</a>
</div>
<div class="col-span-2">
<a href="javascript:void(0)" class="flex items-center text-xs md:text-sm relative top-1 text-black-40 underline">
Ver contexto
</a>
</div>
<div class="col-span-2">
<p class="text-xs md:text-sm flex items-center justify-end md:justify-start relative top-1">
<span class="h-2 w-2 rounded-full bg-green-primary-100 inline-block mr-5 md:mr-1 relative top-[-1px]"></span>
<span class="hidden md:block">aprovado</span>
</p>
</div>
</div>
<!-- End Box Actions -->
</div>
</Slide>
<template #addons>
<Navigation />
</template>
</Carousel>
But the transition behavior of the slides is not as expected. It is just changing withouth the transition/translate position effect
This is how it is:
Expected effect: (by the way, the carousel sometimes spontaneously display the expected behavior like when after some hot module replacement refresh happens after saving some edit in VSCode and there is a refresh in the vue app like this):
Thanks in advance for any advice!! Happy new year !! 🙂
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>
Using Tailwind With ReactJS I'm trying to align an image to the center but I can't, this is my code:
<div class="grid md:grid-cols-2 gap-1 place-content-center">
<div className="hidden md:block my-10 md:ml-10 shadow rounded-sm">
<img
src={ Logo }
alt= "Logo"
className="object-none object-center"
/>
</div>
<form className="my-10 md:mr-10 bg-white shadow rounded-sm px-10 py-5">
...
</form>
</div>
Here is a screenshot of the result:
Make the div parent flex instead of block, add justify-center
like this :
<div class="grid place-content-center gap-1 md:grid-cols-2">
<div class="hidden md:inline-flex my-10 md:ml-10 shadow rounded-sm w-full justify-center">
<img src="https://picsum.photos/200" alt="Logo" class="object-none object-center" />
</div>
<form class="my-10 md:mr-10 bg-white shadow rounded-sm px-10 py-5">...</form>
</div>
have a look https://play.tailwindcss.com/lQAKX22Qf7
Or you could just add mx-auto to img
Okay so I suppose you just want to align the image to the center of that grid item, in that case you can just simply add justify-self-center class into the div that contain the image, something like this:
<div className="grid md:grid-cols-2 gap-1 place-content-center">
<div className="hidden md:block my-10 md:ml-10 shadow rounded-sm justify-self-center">
<img
src={ Logo }
alt= "Logo"
className="object-none object-center"
/>
</div>
<form className="my-10 md:mr-10 bg-white shadow rounded-sm px-10 py-5">
...
</form>
</div>
Also I noticed there's a typo problem at the outer div, it should be className instead of class.
Hope this helps
you need to add m-auto to image. you can see here
<div class="grid place-content-center gap-1 grid-cols-2">
<div class="my-10 shadow rounded-sm w-full justify-center">
<img src="https://picsum.photos/200" alt="Logo" class="object-none object-center m-auto" />
</div>
<form class="my-10 bg-white shadow rounded-sm px-10 py-5">...</form>
</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