Background color changes dimensions ???
Can anyone explain me why thus happens ?
Is there something in the tailwind I do not understand :/
When I hover over number 2-6 I change border color to yellow and then the size looks same with number 1 which is active with yellow background.
I set container
grid grid-cols-[repeat(3,min(50px))] grid-rows-[repeat(2,min(50px))] place-self-center gap-4
that holds those 6 buttons with p tag and number.
After checking developer tools the computed style size is same 48px and 1px border * 2 sides = 50px in total for both active and non-active buttons.
I am very confused as to why this is happening.
9 Replies
Oh and when I hover over active number 1 in developer tools it almost looks like it overflows content outside the container.
borders are added on top of the existing size. The 1 probably has a border set, and the hover then adds that border to 2-6
if that's not it, share your code. Tailwind has an excellent playground, or otherwise you can use codepen
Alright. Thank you.
I removed all borders and it didn't seem to help it only worked when I removed active color.
Here is the section of code that does it. I may be missing the point.
Take a look if you understand tailwind.
There also could be a hidden issue I do not understand when I try to increase border-width to like 5px the border is not outside but inside container expanding almost like inset and when I do hover:border-[yellow(#FDD700)] the border works as you mentioned outside container.
Here is visual aspect when I increase border width to 8px
I may be wrong but I think the #FDD700 color makes it seem bigger then it is. I only set one border width and the only thing I do is change color.
yeah, looks like an optical illusion:
Thank you for this image. Wasted so much time. May I ask what tool is that ?
it's part of snipping tools in windows
you can also just look at the computed size in devtools, but you didn't link a live version so I couldn't do that
Sorry, I didn't post it because the size was exactly the same.