Tailwind Arbitrary Values

This is parent ul
<ul class="grid gap-2 [&:nth-child(2)]:gap-1" href="#">
<ul class="grid gap-2 [&:nth-child(2)]:gap-1" href="#">
Any ideas why this is not working ? I am trying to change padding for the second child and it just doesn't work. I tried with self-reference &, &*, &>*. The last 2 not exactly sure how it works. I assume this > is used for children elements to point they parent and * to select all of the elements. Correct me if I am wrong.
14 Replies
Mannix
Mannix•11mo ago
are you trying to set 2 different gap values? you can only have 1 gap value gap is not margin or padding you can't set different sizes for children
Psyzen
Psyzen•11mo ago
Yes. But from your question I realized I am doing something wrong. What I generally wanted is to have gap-2 for all <li> and for the second and third to have gap-1. But just realized I want the first and second gap be smaller. And you just mentioned it is not a margin or padding. Any solutions for it ?
Mannix
Mannix•11mo ago
you have use margin on the children to space them how you want them
Psyzen
Psyzen•11mo ago
I guess I should set initial gap-1 and the rest to have margin to fill the rest Thank you.
Mannix
Mannix•11mo ago
yup set the gap and the add more space with margin basically
Psyzen
Psyzen•11mo ago
Alright. Let's say if I want to have gap only once but start from the third-child ? Could that work since it will be only be one gap? I guess question would be how to do it :/
Mannix
Mannix•11mo ago
nope gap is for all childreen
Psyzen
Psyzen•11mo ago
Damn, it would be nice to disable selected gap. Like gap:remove(odd,even, 2, etc.) Or something like that.
Mannix
Mannix•11mo ago
maybe one day 🙂
Psyzen
Psyzen•11mo ago
Thank you for answering.
Mannix
Mannix•11mo ago
np good luck with your coding thumbup
Psyzen
Psyzen•11mo ago
Thank you. I was stuck with side-nav bar but I managed to re-make it someone else. I was learning grid-box and some html 5 tag usage like nav, sections. I know those are not a must but I wanted to learn for easier distinction. Tho I am still unsure if section is allowed in nav.
MarkBoots
MarkBoots•11mo ago
you could do something like this. Set the gap size to a custum property. And then with the item:nth-child() you can adjust the margin-top to -1*gap https://codepen.io/MarkBoots/pen/WNPmwqx?editors=1100
Psyzen
Psyzen•11mo ago
I ended up with this. https://codepen.io/LCSNeo/pen/VwggLRO I am sure there is plenty of ways to improve on it probably.
Want results from more Discord servers?
Add your server