Issue
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>
<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>
</body>
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.
Solution
the problem is in using divide-y, instead, you can add border-t for the title which is below. Example: https://play.tailwindcss.com/7aPvDxo7z6
Answered By - DaranaSV
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.