“Rapidly build modern websites without ever leaving your HTML” is the claim of
Tailwind CSS, which is a popular framework in the HTML/CSS/Javascript jungle right now. It has sensible core defaults that help you build your own components without touching CSS. It does have
its detractors, of course.
Not having to use CSS is absolutely fine in my world. I am probably immune to criticisms about style and philosophy because, as I fully admit, I am a JavaScript framework philistine. I just use whatever is hot at the moment, or whatever is available. If it is simple to use and gets results, I am in. I’m usually happy to use Bootstrap, but have occasionally found it a bit cumbersome.
I was delighted to notice the Tailwind site has a playground, which means I didn’t have to install anything to try it out — and you won’t have to either, if you want to follow along below. I assume no more than the basics of standard framework design.
Let’s Get Started
So let’s look at a simple composition while
using the playground. We will just experiment with code on the left, and the frontend result will appear on the right. Notice that one of the buttons on the ribbon used to alter the display allows you to play with the size of the view, which will be useful later.
OK, so let’s play around a bit so that we can understand more of the inbuilt classes. I want to make four square-numbered buttons within a box.
Here is my first attempt. I grabbed some of the
color classes and
width codes, and wrapped it in a
flex box.
<div class="flex flex-row">
<button class="w-1/5 bg-red-400"> 1 </button>
<button class="w-1/5 bg-red-500"> 2 </button>
<button class="w-1/5 bg-red-600"> 3 </button>
<button class="w-1/5 bg-red-700"> 4 </button>
</div>
That “w” width code means that each button takes a fifth of the screen. Here is the result:
👁 Image
Hmm. I haven’t got a very interesting container yet (I wanted a box) and clearly the buttons have a reasonable width, but have not used the space properly. If they did, I would need padding to get them to behave better.
From my knowledge of flex containers, I think I just need to tell them to
grow or add some horizontal
space between the elements. It also looks like I will need to center them too:
<div class="flex flex-row space-x-4 place-content-center">
<button class="w-1/5 bg-red-400">1</button>
<button class="w-1/5 bg-red-500">2</button>
<button class="w-1/5 bg-red-600">3</button>
<button class="w-1/5 bg-red-700">4</button>
</div>
This gives me:
👁 Image
This is all good, and the playground is making life much easier. All I have done is looked at the pre-created class names and had a vague memory of flex boxes.
Onwards. We want a nicer container and more box-like buttons, but not all up at the top. We will just add some
height and some padding.
<div class="flex flex-row place-content-center space-x-4 rounded-xl bg-blue-100 shadow-lg h-32 p-4">
<button class="w-1/5 bg-red-400">1</button>
<button class="w-1/5 bg-red-500">2</button>
<button class="w-1/5 bg-red-600">3</button>
<button class="w-1/5 bg-red-700">4</button>
</div>
This gives us:
👁 Image
However, we don’t have button behavior and those numbers are clearly
too small. So I found some
button code examples and just inserted the relevant classes:
<div class="flex flex-row place-content-center space-x-4 rounded-xl bg-blue-100 shadow-lg h-32 p-4 text-3xl font-bold">
<button class="w-1/5 bg-red-400 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-black">1</button>
<button class="w-1/5 bg-red-500 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-black">2</button>
<button class="w-1/5 bg-red-600 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-black">3</button>
<button class="w-1/5 bg-red-700 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-black">4</button>
</div>
This finally gives us the result below:
👁 Image
But what are the colons for? They provide “if-then” conditionality. E.g. if we are hovering over a button, then change the color to light red. The natural button focus is the trigger for a black ring around the button. However, this conditionality feature comes into its own for something else.
Breakpoints
A big thing within
responsive design is using media queries to alter the display behavior when the size of the view changes. That is, it still looks nice on a small mobile screen as well as a laptop landscape view.
👁 Image
Tailwind allows you to use the conditional colon to alter
breakpoint behavior for any class.
So, for example, if you squeeze the screen, our lovely number buttons get uncomfortable:
👁 Image
I just used the grab handles to put the squeeze on. Would it not be better for the design to try and run vertically if this happened? Well, we could do this by putting breakpoint conditions on our flex-row call and the code that controls horizontal behavior.
Using “sm” or 640 as a breakpoint, I can make the current display change when squeezed to this:
👁 Image
Neat enough for now. This leaves the final “four button in a box” code as:
<div class="flex flex-col sm:flex-row sm:place-content-center sm:space-x-4 rounded-xl bg-blue-100 shadow-lg h-64 sm:h-32 sm:p-4 py-14 text-3xl font-bold">
<button class="sm:w-1/5 bg-red-400 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-black">1</button>
<button class="sm:w-1/5 bg-red-500 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-black">2</button>
<button class="sm:w-1/5 bg-red-600 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-black">3</button>
<button class="sm:w-1/5 bg-red-700 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-black">4</button>
</div>
One final aspect to look at concerns the repetitive nature of the lines.
Extraction
First of all, we will grab some button code from the given examples, and paste it into the playground to demonstrate one of the more advanced facilities:
<!-- Before extracting a custom class -->
<button class="py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75"> Save changes </button>
<!-- After extracting a custom class -->
<button class="btn-primary"> Save changes </button>
We
don’t have a class called “btn-primary”, so nothing much will happen with the second button:
👁 Image
We have a genuine reactive button, and next to it just a bit of text wrapped in a non-existent class.
However, we can
create the class “btn-primary” from the working code using @apply below:
@layer components {
.btn-primary
{
@apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
}
}
Select CSS from the playground and paste in the above:
👁 Image
Returning to the HTML, we now have two identical buttons. Note that they both behave similarly when you hover over them and select them — as expected.
In short, we have taken a multicomponent class and made a new class out of it — it is composed of purely existing pieces. Or from the Tailwind description, we have “extracted a custom class”.
Overall, we are able to get results fairly easily by just adding classes directly from the documentation without too many oddities, and we didn’t need to to touch any CSS directly. That includes some responsive design. With that alone, I understand Tailwind’s success.
