Tailwind: The new way to CSS
If you are a developer who targets browsers, then I am certain that you must have used a mobile-first CSS framework like Bootstrap. But have you ever used a ‘Utility-First’ CSS framework? Arrgh! ‘Utility-First’? What exactly is that? Let us understand what is a ‘Utility-First’ CSS framework. Then let us explore Tailwind, the go-to choice when it comes to such a framework.
CSS classes are usually used to group DOM elements. Once elements are grouped, we can define styles for the same. ‘Utility-First’, instead, uses classes not to group elements but to apply ready-made styles to elements. There are many ‘Utility-First’ frameworks — Tailwind CSS, Tachyons, Shed.css, Basscss, and so. Here, let us explore more about Tailwind CSS.
Well, Tailwind has been around for a while. Its first public release happened on October 31st, 2017. Since then, it is used by millions of developers around the globe for an enhanced styling experience.
What is so special about Tailwind?
Tailwind makes writing CSS a breeze. Let us demonstrate this with an example. Suppose we wish to apply blockstyling to a span element, then add top padding of 1rem to the same.
Using traditional CSS you would do :
<!-- Inside HTML -->
<span class="padding-one block-display">Some Text</span>// In the CSS file
.padding-one {
padding-top:1rem;
}
.block-display {
display:block;
}
Using Tailwind CSS, you could finish this in one line
<span class="pt-4 block>Some Text</span>Yes, Tailwind made implementing your style ridiculously simple by the use of utility classes. From Tailwind official docs, this is what utility classes do :
Utility classes help you work within the constraints of a system instead of littering your stylesheets with arbitrary values. They make it easy to be consistent with color choices, spacing, typography, shadows, and everything else that makes up a well-engineered design system.
The advantages are immediately visible:
- You can avoid context-switching as you don’t have to navigate to your CSS files.
- You can concentrate more on the content and logic of your app/site.
There are some who argue that these ‘utility classes’ make your HTML dirty as these class names are not very expressive, but do you really care for that? You want to get things done in no time, don’t you?
I really hope that I have given you a brief overview of Tailwind. Please do visit the Tailwind CSS Official Website to get hold of it.
