No Time Dad

A blog about web development written by a busy dad

How to Create Rounded Tailwind Cards

Cards are everywhere now. You can’t escape them. Every app I’ve worked on in recent memory has had some type of card in it. Which isn’t surprising to me because they’re an easy way to encapsulate data and display it to the user. Most major web frameworks have their own version of a card, but they’re also easy to make yourself. Especially with Tailwindcss.

One of the key design features of cards is the rounded corners. Tailwind provides multiple utility classes for rounding the corners of any element. For the rounded tailwind card below, I’m using rounded-md who’s equivalent css is border-radius: 0.375rem;.

Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Footer
<div class="flex justify-center mb-3 bg-gray-100 p-4">
  <div class="rounded-md shadow-md bg-white max-w-sm">
    <div class="border-b border-gray-300 p-4">
      <div class="text-2xl font-bold">Header</div>
    </div>
    <div class="p-4">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>  
    <div class="border-t border-gray-300 px-4 py-2 opacity-75">
      Footer
    </div>
  </div>
</div>

The card itself isn’t too fancy, but it does look nice and didn’t require too much code. It’s an easily extendable rounded tailwind card. The main idea is that the card is defined by its shadow. For this, I used the tailwindcss shadow-md utility class. The card body is made up of three sections. A header section, a content section, and a footer.

There is a reason I added padding to each section instead of to the parent div. And that is the bottom border. If I added the padding at the top, then the bottom border on the header and footer sections would not span the entire width of the card, edge to edge. I’d instead have a small gap the width of the padding applied.

The problem of having a gap between the border and the edge is fixable, but I think it makes the css more complicated than if I just added the padding to each section. You could also argue that if I wanted to change the padding of the whole card that I’ve created three times the amount of work, but I really like the fine grained control I have over each section this way. Also, fixing the border to edge space likely requires negative margins or some other css trickery that I really don’t like to use.