Intro
In this article I will discuss where I think tailwindcss is suited to be used and where traditional CSS3 should be used.
First let’s start off with, what is tailwindcss? well it’s a CSS styling framework moving CSS styling directly into the “class” attribute. One of it’s main “selling points” is to build websites without leaving the HTML.
Here’s an example:
|
|
Great Things
I think it’s great as it allows styles to be placed directly with each HTML element, this makes it possible to see what style is associated with a particular element without looking in a separate style sheet. You may be thinking this can already be done using in-line CSS styles, which is true; however tailwindcss simplifies style definitions, for example there is a class name mx-auto which sets margin left and right to auto. If you look at the actual CSS, you might notice it’s compatible with any device size; as they opt for using rem & percentages (which are relative values) instead of fixed values which are not scaleable (such as px).
When using tailwindcss you are using classnames, this allows them to be customised by overriding the defaults (through a config file) given by tailwind. This means you can globally adjust a style; to suit your project theme.
I think the best feature is integration with UI frameworks such as React or Vue, where components can be created; so repetition of styles is small (due to component reuse). Also because the UI frameworks are rendered by the client it does not matter about repetition; since these components are created at the client side.
Another question is, doesn’t it add a lot of code for repeating things that could of been done through simple CSS? Well yes it does, however I think it’s more suited for compiled/bundled projects using Vite or some other build/bundler tool; since unused classes will simply be removed, therefore making the download size smaller for the client.
Not So Great Things
Now moving on to the drawbacks of using tailwindcss, you might of guessed already; complicated styling increases the size of the class list. This may be fine for client side frameworks, however content delivered by the server; such as pre-generated HTML pages (or static pages) will include all of the repeated classes. Since each page cannot be cached for use with another page by the client, this may create a lot of wasted bandwidth. If traditional CSS style sheets were used instead, these can be at first downloaded by the client; but then cached for later use on other pages reducing the overall bandwidth of a site.
Another factor, is the repeated nature of adding classes to every element needed to be styled; this can make it hard to manage (and also harder to read) if you are working with raw HTML without any pre-processing like templates/components. Although raw HTML is being used less for client side apps; it is still used. I think tailwindcss is clearly not suited for this type of project. After using tailwind for a while, even in a UI framework it can create repetition, for example styling similar elements such as buttons or panels will create long lines of class names for each element.
Conclusion
Despite it’s drawbacks I still think tailwindcss is a great tool to use. It can really increase the speed of development when used in the correct project. I think projects that really suit this kind of framework are client side web apps using something like React or Vue (I personally use SolidJS). Even for websites built using static site generators I still think separate style sheets maybe built with a compiler such as SASS can allow for a much better experience, both for the developer and user.
One of tailwind’s drawbacks, repetition for repeated elements can be solved by using a plugin like daisyUI, which provides a set of components for tailwind; reducing the amount of classes needed to style an element. They can also make your theming more consistent due to the available components having the same style.
I hope you enjoyed and learnt something reading this post. Give tailwindcss a try in your next project and see if it’s suitable for your development workflow.
Links to all mentioned tools are below.
This post was not endorsed or sponsored by any of the mentioned parties. My views are my own.
