Tailwind CSS
— Furkan B, Countly
21 Jul 2022
Utility first CSS-Framework
-
What it is?
-
Why not Bootstrap or something else?
-
Pros & Cons
-
Questions
-
Some cat gifs
Content
A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
Some samples
Tailwind is different from frameworks like Bootstrap, Foundation, or Bulma in that it's not a UI kit.
It doesn't have a default theme, and there are no build-in UI components. It comes with a menu of predesigned widgets to build your site with, but doesn't impose design decisions that are difficult to undo.
Why not Boostrap or something else?
Pros
Full control on Style
Tailwind is a unique CSS framework when it comes to styling web applications, meaning that Tailwind does not have a default theme that you have to use like other CSS frameworks.
For example, you can give each project a different look even if you use the same elements (color palette, size, etc.). Therefore, it’s one of the few CSS frameworks that is not opinionated on how you should style your project.
tailwind.config.js
No duplicated class names
Tailwind encourages a utility-first workflow, where designs are implemented using only low-level utility classes. This is a powerful way to avoid premature abstraction and the pain points that come with it.
No more class duplication for similar needs by different developers in project.
No duplicated class names
Faster CSS Styling
There is no faster framework than Tailwind when it comes to styling HTML. As a result, you can easily create good-looking layouts by styling elements directly. This is possible because Tailwind offers thousands of built-in classes that do not require you to create designs from scratch.
Therefore, you do not have to write CSS rules yourself. These CSS classes are the main reason why building and styling with Tailwind is so fast.
Without Tailwind
With Tailwind
Responsiveness
With Tailwind’s pre-built classes, you can design the layout directly in an HTML file. This makes it a very responsive, mobile-friendly CSS framework.
Responsiveness
Additional Features
Tailwind CSS works in the front end of a website. For this reason, it is reasonable for developers to demand ultimate responsiveness.
Well, Tailwind provides the ability to create responsive themes for your web applications and remove all unused CSS classes. With PurgeCSS, Tailwind helps you keep your final CSS as small as possible.
Bonus (dark mode support)
Cons
(Too) Long class attributes
Because you do not have to write CSS rules yourself, Tailwind works differently than most CSS frameworks. While this is great for those unfamiliar with CSS, it also means that Tailwind mixes style rules in with your HTML files.
This goes against the principle of the “separation of concerns.” Many developers prefer to separate page structure and style, claiming that classes make the Tailwind markup process verbose.
It Takes Time to Learn
Because of the built-in classes, Tailwind CSS is quite learning-intensive. Even for experienced developers, it can be a challenge to learn how to use and fully utilize the pre-built classes. But, of course, as with any other development task, practice makes perfect.
However, if you are confident and quick when it comes to writing CSS classes, Tailwind may not be the best choice for you. Even if that’s true, Tailwind generally makes CSS styling faster in the long run.
Lack of Important Components
Unlike Bulma and Bootstrap, Tailwind does not have many significant styling components. Unfortunately, this means you have to manually add features like headers, buttons, and navigation bars for web apps.
This is not a significant drawback, as experienced developers can implement these features quickly. However, you will need to spend some time doing so.
BUT, there is a but.
There are projects backed by Tailwind
headless ui (open source)
There are projects backed by Tailwind
heroicons (open source)
There are projects backed by Tailwind
Tailwind UI (Priced Components)
Questions
More cat gifs
