Enjoying web design using Tailwindcss

Do you enjoy the pain of moving between HTML and CSS files for designing a web page? I don’t and I don’t think anybody would. Then what is the solution? Are there any CSS frameworks good enough to overcome this pain? If yes, which of them to use? My ultimate answer is Tailwindcss and here I am going to share some of my thoughts about it.

An ordinary day for a frontend developer consists of opening an HTML file, a CSS file, and a web browser. We frequently go from HTML to CSS files, make new classes, combine them, make complex selectors, and deal with issues such as specificity. We wrestle with all these to get something we want. For years, many ideas came up to make this procedure more smooth and less painful. Many people use less, sass, scss, or frameworks like foundation and bootstrap. But still, the field on which we wrestle is the same, maybe just fancier.

How nice would it be if we could remove one of HTML, CSS, and a web browser for design? Wrestle with two is much easier than with three. We cannot remove HTML since our content is there. Removing the web browser also is not practical since we need to examine our design step by step. What remains is CSS! But if we remove CSS, how can we design? One may say frameworks like Bootstrap have many premade styles so without touching any CSS files, we can use relevant classes to design the page. Yes! That is a good start but don’t you think this approach makes all websites look the same (and look ugly :D). This is why I say this is just a fancier wrestling field and not a different one.

Let’s change the field and play differently. Tailwindcss is at your service. Tailwindcss provides us with a bunch of utility classes we can add to HTML elements. Do you want padding of 1rem? Add p-4 class. Do you want a red color text on the hover? Add hover:text-red-500 class. But wait! Isn’t this the same as Bootstrap classes? At once yes but deeply no.

Bootstrap has two kinds of classes: utilities and components. Components are sets of classes that are related to each other and without one, the other won’t have any meaningful impact. Classes for making navbar or cards,… are among component classes. But also there are utility classes which are kind of independent of others and can be used anywhere. Classes related to typography, spacing,… are among this group.

Tailwindcss is a utility-first framework. Unlike working with Bootstrap which provides a limited (really limited) number of utility classes, Tailwindcss provides many. And since version 3 practically we have an unlimited number of classes. You just make a new class right inside the HTML file and Tailwindcss generates the CSS style for that class on the fly. Isn’t it cool? This way one can implement nearly any possible design without leaving the HTML file. It is easy, fast, and fun!

In short, Tailwindcss provides these advantages:

• You only focus on design right in the HTML file.
• You get a small CSS file since Tailwindcss only generates classes you have used in your HTML file
• The HTML component becomes portable. Just copy it from one project to another and it fits the design system of that project.
• No specificity issue anymore.
• No garbage classes and style in CSS files
• Perfect for React, Vue, Angular project

There is much more to talk about Tailwindcss. It has good documentation and also it has a playground. At first, it may look weird and pointless but I promise if you start working with it, it shows up its power very soon. I am not sure how one can resist it then.