Tip #15: Build buttons using inline-flex

Button-building is somewhat of an art and certain people have certain preferences on how to build a good, re-usable button component. Today I want to highlight my method for building button components with TailwindCSS and sort of just talk about my methodology and why I think using inline-flex is the best approach for buttons.

Let's go.

So for starters, let's define a .btn class inside of our tailwind.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
	.btn{
    	@apply ...;
    }
}

Then we'll apply a few, base utilities to it:

.btn{
    	@apply inline-flex px-4 py-3;
    }

This will be the base of our button component. We're using inline-flex here for two main reasons:

1. We can leverage flex-box's justify-* and align-* properties if we decide to have multiple items in the button (say an icon and text)
2. Making the button inline and giving it some padding allows for the width of the button to be defined by its content

Point 2 is pretty important to demarcate here. In certain design systems and approaches you'll see developers define either a fixed or max-width for their buttons. Personally I don't like this approach because it makes your buttons "fixed" in the sense that if you need extra content, you'll incur an overflow and if your button has very little content, it'll look too big.

Let's move onto adding a button variant class: btn-primary. This is where we'll give our button some color:

@layer components {
   .btn{
    @apply inline-flex px-4 py-3;
  }

  .btn-primary{
    @apply bg-blue-500 text-white;
  }
}

Now let's apply this to an HTML button:

<button class="btn btn-primary">Primary Button</button>

Looks a bit... blocky. Let's revisit the .btn class and add some more utilities:

  .btn{
    @apply inline-flex px-4 py-3 rounded-lg text-sm font-semibold;
  }

Now our button looks more like a button.

You can continue on this approach and add more styles using the .btn-* variant classes. Just make sure to remember to use .btn and .btn-* when styling your buttons!

Let's expand on this and say we want to throw an icon into our button using an SVG icon from HeroIcons.

<button class="btn btn-primary">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6">
    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75l3 3m0 0l3-3m-3 3v-7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
  </svg>
  <span>Primary Button</span>
</button>

The benefit of inline-flex here is that we can very easily align and space out this icon use-case. We can do both inside of our .btn class:

  .btn{
    @apply inline-flex px-4 py-3 rounded-lg text-sm font-semibold items-center gap-x-4;
  }

That's all you need to make a solid button component in TailwindCSS.