Tailwind CSS version 2.0 was released on November 18, 2020. It has gained a lot of popularity since its initial release and many frontend web developers have already adopted using Tailwind CSS. What exactly is Tailwind CSS? What are the benefits of using Tailwind? How does it compare to other open-source CSS frameworks? In this article, we will discuss all the questions above and more.
What is Tailwind CSS?
Tailwind is a “utility-first” CSS framework that can be composed to build any design, directly in your markup. In simple terms, Tailwind provides a variety of CSS classes that can assist you in creating custom designs. It lets you build completely custom designs without ever leaving your HTML.
Tailwind CSS is very flexible and versatile. It is granular enough and implemented at such a low level, you don’t need to worry about writing your own CSS. All you need to do is find the right classes for the elements you want to style and you can achieve the design you want. From the basic styling of font styles and colour theme to layouts such as grids, position and spacing, and more advanced design such as animation, responsive layout, and even dark mode implementation, all can be achieved by just using the classes provided by Tailwind.
Benefits of using Tailwind
Customization
One of the downsides of previous CSS frameworks is when the custom design is not following the frameworks’ rules and practices, developers have to “fight the framework” to get things to work accordingly. Developers often have to still use custom classes or trying to figure out which classes within the frameworks need to be overridden for them to work properly.
Tailwind on the other hand is built from the ground-up to be super customizable. It comes with a default configuration file that can be easily used to customize everything from colour, font styles and spacing.
No naming things
One common complaint of CSS from developers is that it is sometimes difficult to know what to name the elements. The organization of CSS classes is not an easy task, it is often not done in an ideal way. Some classes might be too specific while others may be too generic. This often results in duplicated code and clustered code base. Tailwind solves all these problems by providing utility classes.
The other benefit of working with the utility classes provided by Tailwind is the readability of the code. The semantic classes, paired with pseudo-classes also make it easier to maintain or update.
Consistency
When we use a traditional approach to CSS, we sometimes run into issues of duplicated styles and inconsistent class naming. It takes extra effort to make sure all the component that shares the same style using the same classes or that it is not coded twice in the stylesheet. When it is a larger project with many different components, it may be difficult to code with best practices as multiple developers might be working at the same time and things might not be communicated well between the developers. With Tailwind, these issues resolve themselves. Less naming means less chance of having naming consistency issues. When there are multiple components with similar styles but only slightly different, we wouldn’t have to worry about how to best present that in the stylesheet to minimize duplicated code.
Working with Tailwind also gives you consistency when updating or making changes to the design. You don’t have to worry about breaking something elsewhere when making updates or changes to a certain component or page. This makes it easier to change a single page without having to worry about the side effects you may be causing.
Easy to get into
Tailwind provides all the naming and organization. Its mostly semantic classes make it easy to understand and work with. This also means that there is a lower learning curve for a developer when taking over a website that utilizes Tailwind. The consistency within the projects solves a lot of extra effort to ensure changes are done properly and not messing up other parts of the site. Another benefit of working with Tailwind is that it is also consistent across projects. A developer that is familiar with Tailwind can jump into a new Tailwind project with very little trouble.
Performance
One common downside of using CSS Frameworks is that it reduces the performance of the website. We’ve talked about how the speed of your website makes a significant difference for conversion, it is also worth noting that with the ever-changing Google SEO standard, it is important to optimize the performance of your website as much as possible.
The good news is that Tailwind, although by default comes fairly large in size, it is easy to automatically check which classes you’ve used and remove everything else from your final build. Tailwind provides built-in PurgeCSS functionality that can easily improve the performance of your website compare to other CSS Frameworks.
To echo back on previous points, most projects have the tendency to have bigger CSS files as the project grows. The company may run a marketing campaign with a new landing page and new styles for some custom elements. Or the website introduced a new feature that has extra styling, all these can increase the CSS file size ever so slightly.
This is not the case when using Tailwind, because you will be using a standardized set of classes from the same CSS stylesheets, the CSS file will remain small throughout the growth of the project and thus minimizing the decrease of performance over time.
Tailwind CSS compare to Bootstrap
Bootstrap was first introduced in 2011 and has since become one of the most popular UI frameworks in the world of web development. It is estimated that about one in five websites uses Bootstrap. So how does Tailwind CSS compare to Bootstrap?
At the first glance, Tailwind CSS seems like it is something similar to Bootstrap, however, it has fundamental differences between them. Most frameworks such as Bootstrap or Material UI have pre-designed components such as cards, buttons, navbars, accordions and more. Tailwind CSS, on the other hand, doesn’t provide a pre-designed set of components, but rather a long list of utility classes that you can combine to achieve a custom design.
Because frameworks such as Bootstrap provides a pre-designed set of components, websites that use Bootstrap often look very similar to thousands of other websites built with the same framework. Developers and designers get away with this by overriding the styles. However, there are two problems with these solutions, first, things can get messy really quickly when we start overriding a bunch of styles to achieve the desired look. The second issue is the reduced performance of the website. Tailwind CSS solves this problem by not providing pre-designed components but rather a set of classes for you to mix and match to create the custom design you want.
This is not to say Tailwind CSS is better in every way when compared to other CSS Frameworks, there are certainly a few drawbacks of Tailwind CSS. The first that comes to mind is readability. In some cases, to achieve the design you desire, it might take a lot of classes and make the template or the HTML not as easy to read. The good news is that the utility classes of Tailwind CSS are fairly semantic and although it might take a bit of time to learn the classes and get used to it, this becomes a non-issue after working with Tailwind for a while.
The other weakness of Tailwind is creating complex animations, even though simple animations are included out-of-the-box, and more can be added through the configuration, complex animation can be harder to achieve with the default classes.
Conclusion
Tailwind is a low-level CSS framework that is gaining popularity. The out-of-the-box utility classes and the ease of configuring the settings are attractive to many developers and designers. The flexibility, ease of organization and performance might be a better solution for your project compared to other CSS Frameworks. That being said, if you have never worked with Tailwind before, evaluating its benefits versus the learning curve of your team might be something you want to consider. If you would like to learn more about Tailwind CSS or if you have a project that you would like to make good use of Tailwind CSS, feel free to give us a shout and we will be more than happy to help.