cssuser-interfacetailwind-css

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-#)?

Solution

  • 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