Tailwind random padding in column layout - html

I'm struggling to do this well, but I want a 2-column fixed layout with fine-grained control on the width. This looks almost perfect to me, but the top-left element has some mysterious padding.
Parent
<Layout>
<div className="flex flex-col mt-5 w-full h-full sm:h-fit space-y-8 sm:space-y-0 sm:flex-row flex-wrap">
<Article/>
<Article/>
<Article/>
<Article/>
<Article/>
<Article/>
</div>
</Layout>
Child
<div className="flex flex-col w-full h-fit sm:w-1/3 pl-5 space-y-2 m-3">
{/* Date */}
<span className="font-fira text-xs text-[#B3B4B4]">January 1, 2023</span>
{/* Title */}
<span className="font-inter font-semibold text-xl hover:opacity-50">building and automating a homelab in 2023</span>
{/* Tags */}
<div className="flex">
{/* Can support multiple tags in theory, so we wrap */}
<div className="flex space-x-1 text-xs text-[#B3B4B4] font-fira">
<img src="/icons/tag.svg" className="w-2" />
<span>life</span>
</div>
</div>
</div>
I realize grid might be better here, but I like and am more comfortable with flexbox. How can I achieve this below picture minus the odd padding/margin?

The code looks fine according to tailwind play.
Mysterious padding would be because of the padding placed in the parent elements which you haven't produced in your question. The code you have produced is working as expected !. Check the above mentioned link

Related

So I cant get these cards right. these images and cards are changing in size whenever I insert a <h> with more text, the more text the more changes

Here is an example
here is my code
<div className="lg:flex gap-10 mx-auto">
<div className="text-center shadow-lg p-10 rounded-xl my-10 border-4 border-teal-600 flex-auto items-center">
<Image src={figma1} width={"100%"} height={"100%"} layout="responsive" className="rounded-xl border-teal-600" />
<div className="text-center shadow-lg p-10 rounded-xl my-1 flex-auto items-center">
<h3 className="text-lg font-medium pt-8 pb-2">Less text smaller picture</h3>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Vis</button>
</div>
</div>
Im using tailwind.
I dont know how to fix this. Ive tried overflow-hidden- h-full etc, but cant seem to find a solution
You have width={"100%"} height={"100%"}, and the text is making the container bigger, so it's logical that the 100% will be bigger when the container is bigger because the text is bigger. If you don't want that, you can just change the width and height using a fixed width, and not a width with %, that follows the change in the container.
You can set margin:0 for the h3 tags. Since <h> tags have a default margin to them. You have to set them to 0 manually
.text-center h3{
margin :0
}

Resizing image to circular size in CSS

Currently, my image is getting shown like this, but I want them to be circular and each of equal width and height.
They aren't square now and I have added the below CSS tailwind code but still am not getting them all in the circular.
<div className="cursor-pointer">
<div className="w-full overflow-hidden rounded-full mb-2 border border-black">
<img src={banner} alt={title} loading="lazy" className="w-full" />
</div>
<h3 className="text-sm md:text-lg font-medium ">{title}</h3>
</div>
I have tried different iterations with hard-coded height and width, but still am not able to figure out how to get ahead of it.
Any help is highly appreciated!!
EDIT:
On w-20 and h-20, the images get circular and on doing w-25 and h-25 they become disproportionate again. Any lead on why so?
And on adding w-20 and-20 the text isn't in the middle anymore. How can I fix that?
For tailwind, you can use the CSS for rounded-full on the image tag. You need to provide a fixed height and width to the image as well like
<img class="w-50 h-50 rounded-full" src="pic.jpg" alt="Rounded avatar">
Here is Leonardo DiCaprio below for you :)
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet" />
<img class="p-1 w-50 h-50 rounded-full ring-2 ring-gray-300 dark:ring-gray-500" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtyS3wBrnrkDXvhSo8SEXpvUXqXajtTSi9zD33IpKxAJHlijHnaY1pFT30NpaxxnP58PM&usqp=CAU" alt="Bordered avatar">
Give your image's parent div element the same width and length and make it rounded full,
use this tailwind classes
w-10 h-10 rounded-full

How do I shrink a flexbox with two elements inside of it, using Tailwind CSS?

I have been trying to shrink my flex box, but I haven't had much luck getting this to work.
Here is the code sample:
<div className="flex justify-center bg-white rounded w-23 mx-auto">
<p>Contact Number</p>
<button className="px-4 py-3"><DropIcon /></button>
</div>
This is the current state of the element

Can't get percentages to work in CSS with Tailwind

So I'm trying to create a card with information on the right and a purple hue on the left if it's selected. I'm using Next and TailwindCSS.
Here is my parent component which renders the cards:
{files ? (
<div className="ml-6 mt-8 absolute">
{files.map((value) => {
return <FileCard key={value.id} file={value} />
})}
</div>
) : (
<div>graphql not working :(</div>
)}
and here is the FileCard component:
return (
<div className="flex justify-content items-center mb-4 w-72 bg-white rounded-lg shadow-lg relative">
<div className="h-full w-2 bg-indigo-600 relative rounded-l-lg"></div> <- // here the h-full not working
<div className="py-4 px-4 flex justify-between items-center">
<div className="flex flex-col justify-center align-start text-sm font-bold">
<p>{file.title}</p>
<p className="text-xs">Last updated: {date.toString()}</p>
</div>
</div>
</div>
)
Expected results:
Actual results:
If I hard code the height with h-20:
As described in the official tailwindcss docs
Use h-full to set an element's height to 100% of its parent, as long as the parent has a defined height.
100% height only works if the parent element has a fixed height defined.
So one of the possible solution is to set the height of parent element like:
<div className="h-20 flex justify-content items-center mb-4 w-72 bg-white rounded-lg shadow-lg relative">
Here i've set the height to 20 which is equivalent to 5rem. You can set it according to your need and the inner div will adapt to that height if h-full is applied to it.
You can use vh. Example: h-[40vh].
Kind of late in the party but have you tried passing a percentage like this:
<div className="w-full h-[40%]">
You would notice in the web inspector, it creates a class like this on the fly:
.h-\[40\%\] {
height: 40%;
}
There is no need to extend in the tailwind config.
This works for everything in the framework, including things like background colors, font sizes, pseudo-element content, and more.
Reference: https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values

Getting buttons to stretch full screen with Tailwind

I'm trying to get buttons to stretch across the screen with tailwind, but either they align left and don't stretch out (most cases), or - as in the current state of the code, they seem to stretch off the right hand side of the screen!
I'm sure I'm missing something obvious but can't see what it is. My header and footer stretch appropriately, and originally I just duplicated them, but as buttons, not divs.
Code (stretching off screen version) currently looks like this:
<body>
...
<div class="">
<div class="block">
<ul class="">
<li><button class="w-full bg-orange-200 hover:bg-orange-400 rounded-lg mx-6 my-4">
<div class="text-black text-lg content-center">
<h2 class="font-bold">Mike's big adventure</h2><br>
<div class="text-black text-base">Aargh, zombies!</div>
<div class="text-gray-600 text-xs">
<div>Created: 2020-03-24T12:57:01.753Z</div>
<div>Updated: 2020-03-24T13:00:06.411Z</div>
</div>
</div>
</button></li>
... more list items
</ul>
</div>
</div>
...
(Note, don't think it makes a difference, but the html is actually being generated by an Elm SPA)
How do I need to nest the various container, w-full, w-screen, button etc. and what combo do I need to get what I want?
Edit: This snippet isn't the only thing that isn't stretching. For example neither does the page header. The page footer, which is attached to the bottom of the screen, stretches all the way though ...
Header:
<div class="container flex-auto w-screen m-2">
<div class="w-full content-center bg-orange-500 rounded-lg">
<h1 class="font-bold text-5xl text-center">Header</h1>
</div>
</div>
Footer:
<div class="container flex-auto w-screen mx-2">
<div class="absolute inset-x-0 bottom-0 bg-orange-500 rounded-lg m-2">
<div class="m-4">Footer</div>
</div>
</div>
You should make the <li> full width since the button is nested in it and take the width of its parent which is the li. Add a w-full class.
Maybe also try adding a block class to the button as well
Add