I have always been a bootstrap guy when it comes to building layouts rapidly. I use Material UI occasionally when the layout contains a lot of advanced components (datepicker, pagination, and others) but bootstrap has always been my go-to framework.
Recently, I was asked to develop a website at work, a fairly simple one to showcase a product. My initial reaction was to go with the framework I am most comfortable with but wait. developers don’t do the same thing again and again right? Developers are meant to be curious by nature. So, I stepped out of my comfort zone, searched for a lightweight framework, and found this beauty called Tailwind.
Here are the top five things I love about Tailwindcss.
It is a utility-first framework
Most CSS Frameworks come with lots of predesigned components from buttons to alerts. These are very helpful when you don’t have to add your personal touch but it can be time-consuming to overwrite all of their predetermined classes for implementing a custom design.
But Tailwindcss has been developed with utility-first mentality. Unlike component-based frameworks like Bootstrap and Material UI, Tailwindcss gives you highly customizable utilities to work with. And btw, utilities are the shorthand classes for CSS like mt-auto for margin-top: auto.
All the Styles can be written on the HTML document
If you use Tailwind at its fullest potential, I doubt you will ever need a separate file for styles. The utilities are highly customizable and with the responsive variants, you can make up all the CSS on your HTML document. But if your HTML is starting to get messy with all the repeated styles, you can always create a new file for keeping these styles. But my point is not about the separate stylesheet, it’s rather about not having to go through the process of forcing yourself to come up with unnecessary class names.
The small size of Style Sheet
Tailwind under the default configuration outputs 1996 KB of uncompressed CSS. This is because it has a lot of utility classes and each class corresponds to a new style. But you can always remove the unused styles using a tool called PurgeCSS. After removing unused styles, I ended up with 12 KB of compressed CSS.
Many Thanks to Tailwind Authors
The authors are super active on the project and the official documentation is so well made that you can catch up on the framework in a very short period of time.
Resources
Top comments (0)