Tailwind CSS Tips and Tricks
Inspired by a tweet from Laravel employee #1, Mohamed Said, I decided to write this post detailing how to resolve issues that developers might run into when using Tailwind CSS. Most of the problems can be solved pretty easily, you just need to know a couple of classes to use in the right spots.
How to center an SVG and text inside a button or link with Tailwind CSS
To vertically center an icon and some text inside a button or link, add the following classes to the button/link inline-flex items-center. Note: wrapping the text in a span is not required, but I like to for consistency.
Example screenshot
Code
1<button 2 class="inline-flex items-center px-6 py-3 text-white font-semibold bg-blue-700 rounded-md shadow-sm" 3> 4 <span>View article</span> 5 <svg class="ml-3 w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> 6 <path 7 fill-rule="evenodd" 8 d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" 9 clip-rule="evenodd"10 ></path>11 </svg>12</button>How to vertically center a div inside another div with Tailwind CSS
Vertically centering a div inside another div is a similar problem to the previous example. It’s very common to need to center a card or some other content vertically within a section on a page. To do so, add the flex items-center classes to the wrapper div. If the inner contents should also be horizontally centered, add the justify-center class as well.
Example screenshot
Code
1<!-- Wrapper div with a height greater than the contents --> 2<div class="min-h-screen flex items-center justify-center bg-gray-100"> 3 <!-- Card or contents that should be centered vertically --> 4 <div class="max-w-md px-10 py-12 bg-white rounded-lg shadow-lg"> 5 <h2 class="text-gray-900 text-2xl font-bold leading-snug"> 6 Getting Started with Tailwind CSS Custom Forms 7 </h2> 8 <p class="mt-2 text-lg"> 9 In this tutorial, I show you how to install the Tailwind CSS Custom Forms10 plugin and get started using it.11 </p>12 <a href="#" class="mt-6 inline-block text-blue-700">Read more</a>13 </div>14</div>How to create a Bootstrap-like responsive column grid with Tailwind CSS and flexbox
One tricky thing that’s included in Bootstrap but “missing” from Tailwind is a responsive column/grid system built with flexbox. Note: I’m not talking about CSS Grid here.
The trick is using flex, flex-wrap, and negative margins to achieve the responsive columns.
Start with a “container” element that has some padding and a max-width/mx-auto if desired. The padding used here should be exactly half of the column “gap” you desire. In the example below, I’m using px-4.
Next, add your “grid wrapper”. It should have a negative margin and the flex flex-wrap classes. The negative margin should match the same amount as the padding on the container, so below I’m using -mx-4. If the negative margin is greater than the padding on the container, you might get horizontal scroll bars on some screen sizes which isn’t desirable. This is sort of the equivalent of the row class in Bootstrap.
Next, you can build your “columns”. Here, you’ll want to add the same amount of padding that was “subtracted” by the negative margin, so I’m using p-4 below. Here, you’ll also set your column widths. Instead of classes like col-4 col-md-3 used in Bootstrap, we’ll simply use the built in Tailwind width classes. Below, I’m using w-full sm:w-1/2 lg:w-1/3 to make the columns full-width on mobile, half-width on small screens, and one-third-width on large screens.
Inside each “column”, you can add whatever contents you desire. Below, I’ve added some cards as my content.
Now, you should have a functioning, responsive grid system. If you want to increase the amount of space between each grid column, increase the padding on the “container”, the negative margin on the “grid wrapper”, and the padding on each “grid column”.
Example screenshot
Code
1<!-- Container --> 2<div class="max-w-screen-xl mx-auto px-4"> 3 <!-- Grid wrapper --> 4 <div class="-mx-4 flex flex-wrap"> 5 <!-- Grid column --> 6 <div class="w-full p-4 sm:w-1/2 lg:w-1/3"> 7 <!-- Column contents --> 8 <div class="px-10 py-12 bg-white rounded-lg shadow-lg"> 9 <!-- Card contents -->10 </div>11 </div>12 <!-- Grid column -->13 <div class="w-full p-4 sm:w-1/2 lg:w-1/3">14 <!-- Column contents -->15 <div class="px-10 py-12 bg-white rounded-lg shadow-lg">16 <!-- Card contents -->17 </div>18 </div>19 <!-- Grid column -->20 <div class="w-full p-4 sm:w-1/2 lg:w-1/3">21 <!-- Column contents -->22 <div class="px-10 py-12 bg-white rounded-lg shadow-lg">23 <!-- Card contents -->24 </div>25 </div>26 </div>27</div>How to make all divs in a flex row equal height with Tailwind CSS
Expanding on the example above, you might’ve noticed the cards aren’t the same height. While in some cases that’s fine, in others, it’s more aesthetically pleasing for each item to be of equal height.
The trick is to add the flex flex-col classes to each “grid column” element and add the flex-1 class to each of the “grid column” elements contents.
Example screenshot
Code
1<!-- Container --> 2<div class="max-w-screen-xl mx-auto px-4"> 3 <!-- Grid wrapper --> 4 <div class="-mx-4 flex flex-wrap"> 5 <!-- Grid column --> 6 <div class="w-full flex flex-col p-4 sm:w-1/2 lg:w-1/3"> 7 <!-- Column contents --> 8 <div class="flex-1 px-10 py-12 bg-white rounded-lg shadow-lg"> 9 <!-- Card contents -->10 </div>11 </div>12 <!-- Grid column -->13 <div class="w-full flex flex-col p-4 sm:w-1/2 lg:w-1/3">14 <!-- Column contents -->15 <div class="flex-1 px-10 py-12 bg-white rounded-lg shadow-lg">16 <!-- Card contents -->17 </div>18 </div>19 <!-- Grid column -->20 <div class="w-full flex flex-col p-4 sm:w-1/2 lg:w-1/3">21 <!-- Column contents -->22 <div class="flex-1 px-10 py-12 bg-white rounded-lg shadow-lg">23 <!-- Card contents -->24 </div>25 </div>26 </div>27</div>How to push a button to the bottom of every card in a row with Tailwind CSS
Expanding even further on the example above, if you were to have a button at the bottom of each card, you might want the button to be pinned to the bottom of each card.
Make sure you’ve implemented the previous tip then add flex flex-col to the “column contents” element. Wrap all the contents except the button in a div with the class flex-1 and the buttons should be pushed to the bottoms of the cards now.
Example screenshot
Code
1<!-- Container --> 2<div class="max-w-screen-xl mx-auto px-4"> 3 <!-- Grid wrapper --> 4 <div class="-mx-4 flex flex-wrap"> 5 <!-- Grid column --> 6 <div class="w-full flex flex-col p-4 sm:w-1/2 lg:w-1/3"> 7 <!-- Column contents --> 8 <div 9 class="flex flex-col flex-1 px-10 py-12 bg-white rounded-lg shadow-lg"10 >11 <div class="flex-1">12 <h2 class="text-gray-900 text-2xl font-bold leading-snug">13 Tailwind v1.1.014 </h2>15 <p class="mt-2 text-lg">16 Tailwind v1.1.0 has been released with some cool new features and a17 couple of bug fixes. This is the first feature release since the18 v1.0 release, so let's dig into some of the updates.19 </p>20 </div>21 <a22 href="#"23 class="mt-6 inline-flex items-center px-6 py-3 text-white font-semibold bg-blue-700 rounded-md shadow-sm"24 >25 View article26 </a>27 </div>28 </div>29 <!-- Grid column -->30 <div class="w-full flex flex-col p-4 sm:w-1/2 lg:w-1/3">31 <!-- Column contents -->32 <div33 class="flex flex-col flex-1 px-10 py-12 bg-white rounded-lg shadow-lg"34 >35 <div class="flex-1">36 <h2 class="text-gray-900 text-2xl font-bold leading-snug">37 Getting Started with Tailwind CSS Custom Forms38 </h2>39 <p class="mt-2 text-lg">40 In this tutorial, I show you how to install the Tailwind CSS Custom41 Forms plugin and get started using it.42 </p>43 </div>44 <a45 href="#"46 class="mt-6 inline-flex items-center px-6 py-3 text-white font-semibold bg-blue-700 rounded-md shadow-sm"47 >48 View article49 </a>50 </div>51 </div>52 <!-- Grid column -->53 <div class="w-full flex flex-col p-4 sm:w-1/2 lg:w-1/3">54 <!-- Column contents -->55 <div56 class="flex flex-col flex-1 px-10 py-12 bg-white rounded-lg shadow-lg"57 >58 <div class="flex-1">59 <h2 class="text-gray-900 text-2xl font-bold leading-snug">60 11 Benefits of Tailwind CSS61 </h2>62 <p class="mt-2 text-lg">63 I've been using Tailwind CSS professionally almost every day for64 nearly two years. Here I share some of the benefits I've gained by65 using Tailwind.66 </p>67 </div>68 <a69 href="#"70 class="mt-6 inline-flex items-center px-6 py-3 text-white font-semibold bg-blue-700 rounded-md shadow-sm"71 >72 View article73 </a>74 </div>75 </div>76 </div>77</div>How to create a Bootstrap-like responsive column grid with Tailwind CSS and CSS grid
If your site doesn’t need to support IE11, you can use this much simpler implementation to achieve the same results as the previous example.
Just add grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 to your “container”, and you can remove all the “wrappers” and insert your cards directly inside the “container”.
To adjust the gap between each column, replace the gap-4 class on the container with one of the other gap-* utilities Tailwind provides.
Code
1<!-- Container --> 2<div 3 class="max-w-screen-xl mx-auto px-4 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3" 4> 5 <!-- Grid column --> 6 <div class="flex flex-col flex-1 px-10 py-12 bg-white rounded-lg shadow-lg"> 7 <div class="flex-1"> 8 <h2 class="text-gray-900 text-2xl font-bold leading-snug"> 9 Tailwind v1.1.010 </h2>11 <p class="mt-2 text-lg">12 Tailwind v1.1.0 has been released with some cool new features and a13 couple of bug fixes. This is the first feature release since the v1.014 release, so let's dig into some of the updates.15 </p>16 </div>17 <a18 href="#"19 class="mt-6 inline-block px-6 py-3 text-center text-white font-semibold bg-blue-700 rounded-md shadow-sm"20 >21 View article22 </a>23 </div>24 <!-- Grid column -->25 <div class="flex flex-col flex-1 px-10 py-12 bg-white rounded-lg shadow-lg">26 <div class="flex-1">27 <h2 class="text-gray-900 text-2xl font-bold leading-snug">28 Getting Started with Tailwind CSS Custom Forms29 </h2>30 <p class="mt-2 text-lg">Shorter content for accentuation</p>31 </div>32 <a33 href="#"34 class="mt-6 inline-block px-6 py-3 text-center text-white font-semibold bg-blue-700 rounded-md shadow-sm"35 >36 View article37 </a>38 </div>39 <!-- Grid column -->40 <div class="flex flex-col flex-1 px-10 py-12 bg-white rounded-lg shadow-lg">41 <div class="flex-1">42 <h2 class="text-gray-900 text-2xl font-bold leading-snug">43 11 Benefits of Tailwind CSS44 </h2>45 <p class="mt-2 text-lg">46 I've been using Tailwind CSS professionally almost every day for nearly47 two years. Here I share some of the benefits I've gained by using48 Tailwind.49 </p>50 </div>51 <a52 href="#"53 class="mt-6 inline-block px-6 py-3 text-center text-white font-semibold bg-blue-700 rounded-md shadow-sm"54 >55 View article56 </a>57 </div>58</div>Conclusion
Hopefully you were able to find some problems you’ve ran into, and hopefully, my solutions help you solve them. If there are any other CSS problems you run into often, reach out and tell me on Twitter! I’ll try to come back to this post and add more problems and solutions as time goes on and I come across more.