rationale⌗

CSS is one of the easiest languages to write. Its composition is rather simple, consisting of a collection of rules. Each rule has a name that refers to a specific pattern of elements. Inside a CSS rule there is a collection of declarations, each declaration has two items in it: A property name, and value.

Being very easy to create does not mean it is easy to maintain. Maintenance is more costly than creation or initiation because it’s a routine cost. If you want to add features to your software, you have to deal with the cost of maintaining that new feature.

enter tailwind⌗

Tailwind is a CSS toolkit that is absolutely bloated. Its size is rather big, clocking at 3.5 megabytes. For contrast, the average CSS library size is 180 KB, that’s 5% of tailwind’s size.

Add to that how slow CSS can be processed the bigger it is, and how on mobile it takes a literal 10 seconds to fully process tailwind, and you start to wonder why I am even giving attention to this toolkit.

The reason is it’s philosophy. Tailwind wants you from stop writing CSS, so it generates classes using JavaScript with different possible values.

For example, there are 22 classes for colors, and each class has 10 shades, that equal to a total of 22 * 10 = 220 classes. By creating such a vast and redundant amount of classes for beautiful colors, it further distracts you from writing CSS.

It’s not just colors either, it has classes for different layouts, transitions, sizing, typography, backgrounds, borders, effects, filters among others.

performance > maintenance⌗

Yes, that is true. Performance does matter more than maintenance. After all, you can’t exactly maintain a piece of software without being able to use it.

In any case, tailwind has a tiny little hack up it’s sleeve. And that hack is the exclusion of any classes there are not used.

For example, say you are only using classes: a, b, c. But your CSS file specifies more than 35 classes.

The hack would remove all those unnecessary classes by matching them against your HTML files, so that you end up with a very small file.

When this is done with tailwind, it cuts the size by ~400%. Cool, right?

There are many examples of websites that use tailwind and simply look amazing. Three out of my current projects use tailwind, checkout:

  • stoic: an app that showcases stoic quotes about life
  • a2z: a website for an institution in yemen
  • my portfolio: my portfolio.

conclusion⌗

Writing CSS is time-consuming, and maintaining CSS is twice or even thrice as time consuming as writing it. Tailwind presents a fast and easy way to design beautiful websites. I highly recommend it for every front developer out there, whether you’re experienced or a beginner, using tailwind will improve your productivity like no-other.