While building buttons with Tailwind CSS, you might notice icons and text don't vertically align just right. Sometimes they do, but if you look close they're probably off by a tiny bit. Sure it's only a pixel or two, but design is often in the details. Those pixels could be the difference between your button looking just okay, and really professional.
Say we have a button with an SVG icon in it like this:
Luckily the solution is simple. Instead of any margin or padding hacks, we can just use flexbox! Apply the inline-flex items-center utility classes to the anchor tag.
You'll probably also need to add some margin to the inner SVG element. In this example I added mr-1 to space out the icon horizontally. This is because having inline-flex on the containing element causes the svg and text to become flex children (instead of regular inline elements) which butts them right up against one another.
Hope you found this helpful! What are your favorite little tricks with Tailwind? Let me know on Twitter and I'll be sure to give you credit in the next tidbit!