CODEWITHSUNDEEP
csstailwind-css
ghostsites
ghostsites

Reputation: 13

Tailwind divide-y class place weird

I'm facing a problem when I use the divide-y class from Tailwind, I created an example from my original code and here is a link : https://play.tailwindcss.com/q28EwgI0Ho.

body {
  background-color: goldenrod;
}
<div class="bg-blue-900 text-center py-12">Random Body</div>
<div class="relative pt-12">
  <div class="bg-blue-900 absolute inset-0 h-24" />
  <div class="grid grid-cols-2 divide-x divide-y rounded-xl w-11/12 bg-white mx-auto pb-2">
    <div class="relative p-8">
      <div class="absolute bg-green-500 inset-x-0 w-1/5 md:w-1/12 text-center mx-auto -mt-12">Title</div>
      <div class="text-center text-xs">Random Text</div>
    </div>
    <div class="relative p-8">
      <div class="absolute bg-green-500 inset-x-0 w-1/5 md:w-1/12 text-center mx-auto -mt-12">Title</div>
      <div class="text-center text-xs">Random Text</div>
    </div>
    <div class="relative bg-white col-span-2">
      <div class="text-center text-xs">Random Text</div>
    </div>
  </div>
</div>

<script src="https://cdn.tailwindcss.com"></script>

As you can see the divide-x property doesn't work well on the right side, it flows over and we can see it as the div have rounded corners. How can I avoid this please ?

Notice that I can't use overflow-hidden as this causes the title div to be hidden.

Upvotes: 1

Views: 6912

Answers (1)

DaranaSV
DaranaSV

Reputation: 62

the problem is in using divide-y, instead, you can add border-t for the title which is below.

body {
  background-color: goldenrod;
}
<div class="bg-blue-900 text-center py-12">
  Random Body
</div>
<div class="relative pt-12">
  <div class="bg-blue-900 absolute inset-0 h-24" />
  <div class="grid grid-cols-2 divide-x rounded-xl w-11/12 bg-white mx-auto pb-2">
    <div class="relative p-8">
      <div class="absolute bg-green-500 inset-x-0 w-1/5 md:w-1/12 text-center mx-auto -mt-12">
        Title
      </div>
      <div class="text-center text-xs">
        Random Text
      </div>
    </div>
    <div class="relative p-8 border-t-0">
      <div class="absolute bg-green-500 inset-x-0 w-1/5 md:w-1/12 text-center mx-auto -mt-12">
        Title
      </div>
      <div class="text-center text-xs">
        Random Text
      </div>
    </div>
    <div class="relative bg-white col-span-2 border-t">
      <div class="text-center text-xs">
        Random Text
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.tailwindcss.com"></script>

Example TailwindCSS Playground

Upvotes: 3

Related Questions