• Engineering

Finally understanding CSS – thanks to Tailwind

29th June, 2021

Looking at a full stack for creating a web application, my weakness has always been the visual part of it: translating a given design into CSS and markup. Everything from there, frontend logic, backend logic, databases, DevOps, integrations etc. I’d say I can do. That’s not to say I haven’t tried CSS: my earliest teenage “programming“ projects were websites. But I could never make them work really well, let alone cross browser and responsively.

This went on for a long time; I tried Bootstrap and didn’t understand it, I tried SASS and understood it so little that I don’t even know if it’s comparable to Bootstrap or solves another problem entirely. Luckily, there was always someone on my team who was very good at it.

Until about a year ago, when a friend recommended looking into TailwindCSS and gave me a little tour. At first I was sceptical, looking at the seemingly blown-up HTML and repetitive code. But as I began to dig deeper, I found that using this framework, I suddenly began to understand concepts of CSS that had completely evaded me earlier. 

This website is built using Tailwind, and although I wasn’t part of the team building it, it reminded me to write down my learnings, or why I think Tailwind is great for people who struggle with CSS.

Close to CSS

Tailwind offers what they call “utility classes”, a term which, if you’re like me, means nothing at first. Utility classes are basically just a thin wrapper around CSS properties, most of the time translating to a single CSS property one to one. For example, the utility class font-bold translates to the CSS properties font-weight: 700, class m-auto to property margin: auto and so on. So far so easy.

Compare that with Bootstrap, where a single class alert will translate to this CSS:

position: relative;
padding: .75rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: .25rem;

Now what if I need my alert to look different? Can I just override one of these properties, or should I rather create my own class? (the answer may be obvious to an experienced frontend dev, but to me it isn’t).

The point I’m trying to make here is that with Tailwind, you don’t have to learn a framework and CSS on top (to do customizations, which you always have to). You can do pretty much everything with just the framework, and even if you do have to customize something, it’s pretty straightforward because you’ve always stayed close to CSS.

Tailwind also manages to make utility classes a lot more readable than plain CSS. Need a grid with 4 columns? grid-cols-4 instead of grid-template-columns: repeat(4, minmax(0, 1fr)). And it filters out a lot of noise of things that you can, but maybe shouldn’t do with CSS.

Well-made presets

One thing I always struggled with in CSS is that it’s hard to start a small project from the ground up. If you don’t want to use the existing frameworks because of their own complexity, you’re likely searching the entirety of the internet for well-made starter projects, only to find that they were made with a bit different use case in mind, leaving you to develop the rest.

Tailwind comes with some amazing presets that make starting development a lot easier. Whether it be media breakpoints for responsiveness (you can prefix most utility classes e.g. by md: to say that it should be applied only on medium-sized screens and larger), colors (just using the provided grayscale classes like text-gray-600 makes the page so much nicer instead of black/white), or sizes (rounded-lg for a rounded corner with a rather large radius).

All in all, you have the feeling that your page “looks nice“ without a huge amount of effort going into it.

Documentation

Well-made software should come with good documentation, and Tailwind really shines at this. Just through the docs, I suddenly realized that some CSS concepts are not actually that complex.

Let’s take a step back. Before Tailwind, if you’re working in plain CSS and you want to understand how margins work, you google “CSS margins“. The first entry (seemingly for all CSS-related stuff), is w3schools.com. This is their article about margins:

W3Schools docs about margins

“This element has a margin of 70px“. The text itself relating to its border? The border relating to some (invisible) box around it? That doesn’t tell me much at a first glance. Then comes a sentence that is repeated from the top of the example, leaving me to wonder what „outside of any defined borders“ means (there is no further explanation on the page). “With CSS, you have full control over the margins.“ Awesome, but why shouldn’t I? It goes on…

Compare that to the Tailwind docs on margins. It starts with a list of utility classes, then explains the concepts behind them with short sections like this:

Tailwind docs about margins

Now margins are an easy one, but the Tailwind docs explain more advanced things like grid, flex, transitions etc. a lot clearer than any resource I’ve seen before. Utility classes provide the essence of CSS, and the docs explain that essence perfectly.

Additionally, there are the extremely helpful Youtube videos by Tailwind creator Adam Wathan, which take you through building a project from a design, start to finish. So if you're just starting off, you don't only learn specifics of different utility classes, but how you can go about development in general.

Wrapping up

I can’t say I’m up to date with all the latest hypes in web development, but Tailwind is definitely one of them. But its value for CSS amateurs like me seems underrepresented. The first article Google returns for „tailwind advantages“ lists five advantages that may play a key role for a full-time frontend developer but are much too detailed for anyone learning CSS to say „this is the right place for my next hobby project“.

I would argue that it is.

Ulrich Hinze
Solutions Architect Platform