What is Tailwind?

I’ve heard about Tailwind a couple of times over the past years, but I never got curious enough to actually try it out. I always thought it’s just a bunch of utility classes that somehow people prefer over writing their own CSS classes. The thing is, if you’re not already familiar with Tailwind and just glimpse at their website, that’s exactly the impression you get. Buuuut, it’s actually a lot more than that.

If I had to define Tailwind, I’d say it’s a framework for styling your website using a theme. The utility classes are just the interface to that theme. Don’t believe me? Let’s have a look then.

Tailwind has a Playground to… yeah, play around with it. When you’re there, just delete everything that’s already there and copy/paste:

<h1>Hello World!</h1>

What do you expect this will look like? Some bold, large hello world! screaming at you? Not at all. It will look pretty unexciting. No margins, font-weights, font-sizes – the text is going to look very plain. This is because Tailwind applies a CSS reset to normalize styling differences between browsers. They call this Preflight.

All right, that’s handy, but let’s get a taste of Tailwind’s theme by making this look a bit more exciting. How about this:

<h1 class="text-2xl font-bold text-red-500">Hello world!</h1>

Now we’re getting a little taste of Tailwind’s theme. So text-red-500 is a color from Tailwind’s color palette, and text-2xl is a text size from their predefined typography scale. That’s cool, but there’s more we can do. How about we want to center this? Say no more:

<div class="flex justify-center">
  <h1 class="text-2xl font-bold text-red-500">Hello world!</h1>
</div>

What about responsive design? Easy peasy:

<div class="flex justify-center">
  <h1 class="text-2xl font-bold text-red-500 sm:text-4xl">Hello world!</h1>
</div>

Now the text is bigger on screens 640px and wider. Tailwind uses a mobile-first breakpoint system here, meaning that unprefixed classes are the default (mobile) and everything that should be different on wider screens has to be prefixed. See how we’re using a predefined set of breakpoints (a theme) again? Cool!

I think I’ve made my point here, but of course Tailwind is also about utility classes. I mean, you could provide that theme without Tailwind using CSS variables, but it’s actually kind of cool to not leave your HTML and do all the styling right there. It also doesn’t take too long to get used to the utilities, since their naming is actually quite intuitive. I think this is another advantage of Tailwind: preventing endless discussions about class names.

This is just scratching the surface of what Tailwind has to offer, but hopefully it gives you a sense of why it’s more than just utility classes. If you’re curious to explore further, definitely check out Tailwind’s playground – it’s the quickest way to get a feel for it.