What news from AWS re:Invent last week will have the most impact on you?
Amazon Q, an AI chatbot for explaining how AWS works.
Super-fast S3 Express storage.
New Graviton 4 processor instances.
Emily Freeman leaving AWS.
I don't use AWS, so none of this will affect me.
Frontend Development

Tailwind CSS for Developers: Style without Using CSS Code

Tailwind CSS has sensible core defaults that help you build your own components without touching CSS. David Eastman takes it for a spin.
Oct 31st, 2023 5:00am by
Featued image for: Tailwind CSS for Developers: Style without Using CSS Code
Image via Unsplash.

“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.

That “w” width code means that each button takes a fifth of the screen. Here is the result:

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:

This gives me:

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.

This gives us:

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:

This finally gives us the result below:

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.


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.

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:

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:

Neat enough for now. This leaves the final “four button in a box” code as:

One final aspect to look at concerns the repetitive nature of the lines.


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:

We don’t have a class called “btn-primary”, so nothing much will happen with the second button:

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:

Select CSS from the playground and paste in the above:

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.

Group Created with Sketch.
THE NEW STACK UPDATE A newsletter digest of the week’s most important stories & analyses.