Yet another CSS framework?

Well YES! and you will love it… Frank defined Tailwind CSS in his article as “next gen” he also mentioned that “next gen” frameworks need coding skills and I think both statements are totally right.

Tailwind does not come with a lot of predefined components or elements like navbars, cards and so on. Furthermore to be honest most people don’t use all of these components in one project. In comparison to CSS frameworks like Bootstrap or Materialize, Tailwind CSS uses utility classes to give you the total freedom of doing your own layout without leaving HTML.

What are “utility classes” and what does “utility-first” mean?

A utility-first library simply means that unlike Bootstrap, the CSS framework doesn’t give you automatically pre-styled components.

It gives you so-called utility classes that help you to style your own components in the way you want to. From a design perspective you can say that a utility-first css framework adapts the “form follows function” principle because the name of the class predicts exactly what this class will do.

So what is the major benefit of Tailwind CSS?

The major benefit is that you are building your front end so extremely fast.

Don’t waste time in finding the right class names to not struggle with the “Separation of concerns” issue in HTML - just stay in your html file and get things done.

Tailwind gives you the perfect utilities to keep your project maintainable, your customers happy and your designers delighted so your stakeholders can get new products or function faster and cheaper on the market - thanks to your skills.

Incredibly fast and efficient workflows with Tailwind CSS

You can work in modules and there is no need for scoped css definitions anymore. Modularize your source code and rely on the defined classes of Tailwind CSS that don’t change. I love to structure my source code into components and for me the best component is if it is usable in every situation without any setup. To make this possible developers usually use the scoped option in your Vue js components to define css styles only for this specific component. But then you end up repeating yourself over and over so not the best practice. Wouldn’t it be great to have a reliable source of css style definitions that don’t change? Yes it would be great and Tailwind CSS is one way to solve this.

October 2020

Is Tailwind CSS a framework only for dummies?

Is it true that you don’t need CSS skills if you only use utility classes? No it’s not! To get the most out of Tailwind CSS and other utility class frameworks you have to …

September 2020

How to fix the viewport height issue on mobile browsers

In some mobile browsers the Viewport height is taller than the visible part of the page. Is there a fix and how can I adapt it in Tailwind CSS and VueJS? Here is the …

With Tailwind CSS you can have your own “look”

Your application doesn’t have a specific look like Bootstrap made projects. Tailwind CSS gives you a huge set of utility classes to build your own components or layouts.

Tailwind CSS itself is very huge. So if you load it from a CDN you end up fetching 1.4 Mbyte of CSS. Way bigger than other CSS Frameworks, so why do I use it in all my projects? Because it is utility-first. This means you can use a tool like Purge CSS in your build process to get rid of all the CSS definitions you don’t need and you end up with a very small CSS file.

Not to mention that you can optimize Tailwind CSS even more. If you use one specific group of classes again and again you can use the @apply directive to combine these classes to a new one. If you want to know more about how to customize Tailwind CSS - here is your cookbook: a guide to configuring and customizing your Tailwind installation .

.btn {
  @apply text-lg font-bold py-2 px-4 rounded;
}
.btn-blue {
  @apply bg-blue-500 text-white;
}
.btn-blue:hover {
  @apply bg-blue-700;
}

@screen lg {
  .btn {
    @apply text-xl py-8 px-4;
  }
  .btn-blue {
    @apply bg-blue-600;
  }
}

Form your own opinion

To have a whole understanding if “next gen” CSS frameworks like Tailwind CSS may be great for you, you should watch Chris’ video why he doesn’t like Tailwind CSS

Another - more funny and nerdy - look at the situation provides Adam with his detailed look into css files of big corporations: CSS and Scalability . You will get the idea why utility classes are great compared to some multiple CSS definitions that messes up your code. After reading this article you get the idea why I use this “next gen” CSS framework and how utility-first can make your life so much easier.

At least I end up with the same result as Adam - the founder of Tailwind CSS - did in his deep thoughts about the usage of CSS: CSS Utility Classes and “Separation of Concerns” . I can predict that you will have the same grin in your face that I had when I read some parts in the article - especially in Phase 3 and 4.

Tailwind play

On October 7th 2020 Tailwind labs published a great playground for your own experiments.

You can import your own tailwind.config.js and start playing around. It is perfect to explore how the framework works, prototyping new ideas, or creating a demo. The best thing is that you can share it online.

Tailwind play gives you auto-complete and auto-formatting (CMD-S / CTRL-S) so it is great for just exploring the possibilities of an utility-first CSS framework. Tailwind play always uses the latest version so if you have to deal with older designs you can check very quickly if it still looks the same. For you I have prepared a small card example on Tailwind play - check it out.

All links in a practical list