Carson
How to Remove Border Bottom From Last Child With Tailwind
Styling cards or containers with a border bottom can provide a nice distinction between the card and the next child below it. Sometimes you'll run into a situation where the last child in a list will run into something beneath it with a border top. This post will show you how to remove the bottom border from the last child using Tailwind CSS.
In this example, the last card is running into the footer and the styling looks out of place.
// Card Component
<div className="lg:grid grid-cols-2 pb-10 mb-14 border-b-2 border-gray-200 ">
<a href={youTubeLink}
className="cursor-pointer hover:drop-shadow-lg"
>
<Image
src={featureImage.url}
className="rounded-lg"
width='1080'
height='600'
/>
</a>
<div className="mt-2 flex flex-col lg:pl-7 lg:mt-4 mb-2">
<h3 className="text-md font-semibold md:text-xl lg:text-2xl">
<Link href={`/posts/${slug}`}>{title}</Link>
</h3>
<p className="font-thin text-sm md:text-base lg:text-lg mb-2">{date}</p>
<p className="font-light text-sm md:text-base lg:text-lg">{description}</p>
<Link href={`/posts/${slug}`}>
<button
className='border-2 border-gray-400 mb-2 py-3 w-full md:w-1/2 mx-auto lg:w-5/12 lg:mx-0 lg:mb-0
hover:text-white hover:bg-gray-400 rounded-lg bg-gray-50 text-black
transition ease-in duration-200 text-center mt-6 lg:mt-auto'
>
Read More
</button>
</Link>
</div>
</div>As you can see, the bottom border looks out of place with the footer beneath it. Removing the border top on the Footer didn't make the styling look that much better, either. Luckily, Tailwind has a built in 'Last' modifier that makes it very simple to change the styling on the last child. I simply added the 'Last' modifier with a border bottom of 0.
// Card Component
<div className="lg:grid grid-cols-2 pb-10 mb-14 border-b-2 border-gray-200 last:border-b-0">
<a href={youTubeLink}
className="cursor-pointer hover:drop-shadow-lg"
>
<Image
src={featureImage.url}
className="rounded-lg"
width='1080'
height='600'
/>
</a>
<div className="mt-2 flex flex-col lg:pl-7 lg:mt-4 mb-2">
<h3 className="text-md font-semibold md:text-xl lg:text-2xl">
<Link href={`/posts/${slug}`}>{title}</Link>
</h3>
<p className="font-thin text-sm md:text-base lg:text-lg mb-2">{date}</p>
<p className="font-light text-sm md:text-base lg:text-lg">{description}</p>
<Link href={`/posts/${slug}`}>
<button
className='border-2 border-gray-400 mb-2 py-3 w-full md:w-1/2 mx-auto lg:w-5/12 lg:mx-0 lg:mb-0
hover:text-white hover:bg-gray-400 rounded-lg bg-gray-50 text-black
transition ease-in duration-200 text-center mt-6 lg:mt-auto'
>
Read More
</button>
</Link>
</div>
</div>Removing the border bottom makes for a much cleaner transition and flows naturally into the footer beneath it.
I prefer using CSS modifiers to make subtle styling changes instead of writing additional Javascript. Keeping track of all of the useful Tailwind and CSS modifiers for every circumstance isn't easy to do, but this situation happens more often than you would think. Be sure to keep this modifier in your back pocket if you're a fan of Tailwind CSS!
Carson
Full Stack Developer, grilling enthusiast, tennis player, lover of memes.