CODEWITHSUNDEEP
cssuser-interfacetailwind-css
strangeQuirks
strangeQuirks

Reputation: 5920

Tailwind: same space before and after divider line

I am trying to have the same space (and configurable) before and after the divider line. However I cannot seem to get the spacing after the divider line.

<div class="grid grid-cols-1 divide-y divide-solid">
   <div class="pb-5">Hello</div>
   <div class="pb-5">World</div>
   <div class="pb-5">hi</div>
</div>

It looks like this: enter image description here

How can I get the same spacing before and after the divider line? Ideally without needing to touch the children styles (i.e. remove the pb-#)?

Upvotes: 10

Views: 9100

Answers (1)

krishnaacharyaa
krishnaacharyaa

Reputation: 24912

Try this code,

<div class="grid grid-cols-1 divide-y divide-solid bg-gray-500">
        <div class="py-2  first:pt-0">Hello</div>
        <div class="py-2">World</div>
        <div class=" py-2 last:pb-0">hi</div>
</div>

enter image description here

credits: @brc-dd sample

Upvotes: 8

Related Questions