Tailwind & Utility-first CSS

Summary

In this video, I explain what Tailwind CSS is and why it's popular in front-end development. I highlight its utility-first approach, which involves using self-contained classes directly in HTML for faster development and easier maintenance. Tailwind emphasizes mobile-first design and responsive styling using screen size prefixes. I compare it to alternatives like Bootstrap, BEM, and SCSS, noting Tailwind's flexibility and ease of customization. While Bootstrap provides pre-built components and SCSS allows nesting, Tailwind simplifies UI creation without being locked into preset styles, making it a powerful tool for creating unique designs.

Transcript

We've been using a bit of Tailwind already, but I've yet to explain what it is and what makes it so popular in front-end development. The TDLR of this video is better developer experience, faster speed of development, and easier maintainability for the vast majority of developers. There are alternatives and there are different approaches that some would argue is even better or more correct than Tailwind, but software is a game of trade-offs, and Tailwind will get you past the good-enough mark in a very short amount of time. Tailwind's approach to styling in CSS is what is known as utility-first. This diverges from the traditional idea of cascading style sheets where you write classes that can target many elements to applying self-contained utility classes directly to the HTML. These utility classes does one thing and one thing well. So let's say you want to add padding to an element. With Tailwind CSS, you would use the p-x, where x here is the numeric value that decides how much padding you're adding. So let's say we were using the p-4, which will be equivalent to padding and then top right, bottom left, all set to 4 pixels, whatever unit you're using in traditional CSS. The philosophy behind Tailwind is to build your UI using what is known as mobile-first. This simply means that you start by building a UI by targeting mobile-sized screens, and then adjust the UI as you go up in screen size. To accomplish this, Tailwind has these prefixes that you can add to the classes that you use to style your elements. So let's say you prefix something with sm-colon, and then let's say a text size or font size. This font size will only apply to that element once you reach the small screen size. So each of these that you see on the screen right now target a specific width and will take precedence over previously specified styles of the same class. So let's say you have a div that you have specified as being a block. If you then add md-colon flex, once you reach the medium-sized screens, this div will now become a flex container and will apply for medium and large and upwards, unless you specify something else for larger-sized screens. So you can maybe want to use grid instead of flex once you reach the larger screen sizes. So this is really responsive design made really, really simple. There are, of course, alternatives to Tailwind, and some of them have been around for a long time. This includes Bootstrap, BEM, SCSS, plus a bunch more. Tailwind will take you very, very far, but it's always good to know what other options are available. So let's quickly compare Tailwind to these alternatives. Bootstrap gives you some pre-built components like cards, navbars, buttons, and these components use some predefined classes that Bootstrap already created for you. So for example, for a button, you would apply a class called button, button-primary, and then it would use the styles that Bootstrap already pre-selected for you. So if we were to compare our Bootstrap components to our Tailwind component, you can see that the Tailwind component here is much more verbose compared to the Bootstrap one. However, with Bootstrap, you are very often locked into their design decisions unless you override them with custom CSS, which can be a bit tricky, especially when you're starting out. Tailwind will give you the building blocks you need to create your own unique design from scratch. So you don't really need to fight any of these existing styles. With BEM, or Block Element Modifier, you would still write a CSS, but you would write semantic and descriptive classes. So for example, you would write a class that has this name here, like card, underscore, underscore, title, dash, dash, slash, that then contains the CSS you need to achieve what those words mean. So in Tailwind, you would basically just write text-xl, font-bold, and you would achieve what this class describes. So it's another approach, but you would need to write all of the CSS yourself. Now, if you compare SCSS to Tailwind, SCSS lets you nest styles and it lets you create variables. Tailwind does this through configuration and utility classes. So we can see an example here of a button component created with SCSS, where we use some of those nesting and some of those variables, where in Tailwind, you would simply just apply these small utility classes. In my opinion, the Tailwind is easier to understand, it's easier to write, also you can kind of achieve the same result in Tailwind if you wanted to, but you don't need to. The tricky thing is with SCSS, is that at one point it gets kind of tricky to name the classes descriptively. So if you need a button that's a little slightly off than the button you specified, you need to call it button-modifier or button-large or these kind of things. So in this case, the CSS becomes much simpler to understand, and you don't need to worry so much about naming it in a way that you would understand or your teammates would understand. So to recap, here's a list of the pros and cons of using Tailwind, and a big one of them for me is how easy it is to customize. You can get very far with something like Bootstrap, and in the beginning of your web development career, Bootstrap is most likely perfectly fine. But there comes a point where all of these elements that go into creating full-stack web applications become second nature. And when you get to that point, it's really nice that you can customize your websites and your UIs and make them your own. It has always been kind of easy to spot when something is created using Bootstrap. And that is not necessarily the case with Tailwind, because it's so easy to customize and change things to your specific needs. So Tailwind is not just a tool, it's also a philosophy of how you build UIs. And it might feel weird at first, but once you get it, there's really no going back.