TailwindCss : workflow & thoughts

Tailwindcss thoughts

Now I’ve been using TailwindCSS for a couple of projects, I can honestly make a small personal review and how does it compare to other frameworks.

Quick reminder about Tailwind

Tailwindcss is a css framework based on utility classes, that is to say: it doesn’t offer pre-designed UI components (but that might change), like Bootstrap or Vuetify. The goal is to quickly design UI by just using css classes while writing the markup.
Here is the official site exposing all the details tailwindcss.com

Benefits of Tailwind CSS

  • The biggest improvement is in the workflow : the CSS writing phase is almost exclusively done in the HTML markup. That means, we don’t have to jump back and forth between two files (or locations).
  • Secondly, and as a consequence, we don’t have to think about class names, neither we have to structure a nested hierarchy like we usually do using BEM methodology.
  • We don’t need to override pre-designed components to suits our needs. It’s often the case with traditional UI frameworks when we found ourselves struggling to find the right specifity to apply our own styles, so much time lost! The flow here is simple : we build!
  • Tailwind offers an auto-completion extension for VsCode called Tailwindcss intellisense, that is a huge helper when writing classes.
  • The CSS is super light, if used with purgeCss. Usually no more than 20kb once bundled
  • The markup is ours, we don’t have to use specific nested blocks to make things working.
  • A simple responsive mobile-first design system : 4 breakpoints easy to remember, only using min-width, no headaches!

Drawbacks of Tailwind CSS

  • I will start by the most obvious weakness somone can make about Tailwind : it bloats the HTML markup and leads to repetitions. At the end, it might be a problem only if Tailwind is used without a component approach that any frameworks offer (I’m using Vue). So it’s either we need to componentize the markup as soon as we find a pattern, or we can extract our classes in a custom utility class with @apply. All is well explained here https://tailwindcss.com/docs/extracting-components/
  • Tailwind encompasses the majority of the classes we might need, but often, we need something that is not covered by the base configuration. In such case, we need to extend the base configuration using a single tailwind.config.js file, and add our own utility classes. For example, custom spacings or colors..
  • Sometimes, we need to operate very specific operations combined with pseudo classes/breakpoints such as calc(..) or using viewport width units. When things become tricky, we have to rely over basic CSS usage. It has to say we don’t have to constraint using the single utility class methodology and can combine multiple techniques to suits our need. It just spreads a bit more the CSS logic while we would have it all in the same place in an ideal world.

Plugins

Tailwindcss comes with a plugin system so that you can easily extend it with convenient packages provided by the community. Here are the ones I used so far :

  • Tailwindcss important: The !important concept is not part of Tailwind base config, so we have to bring it, so that we can use !class to make it important. Even if not ideal, there’s a lot of cases we have to rely on such specificity.
  • Tailwind owl bring the “stack” concept I use on a frequently basis. It’s basically using sibling selectors to automate the vertical spacing between elements in a block according to the existence of predecessors. It avoids workarounds such as .element:not(first-child) { margin-top: none; }
  • Tailwind custom-forms: is created by Adam Wathan, the Tailwind creator. It offers already extracted utility classes to quickly style form elements. Very convenient.

TailwindCss product

The framework is getting a lot of traction, and has improve a lot during these last months. I found it missed too much suffs before the v1.2.0 (I realize it’s only 22 days ago!). Now it supports CSS grid, transform and transition out of the box. Before, we had to rely on external packages.

Yesterday, they released an early version of Tailwind UI, which is a set of pre-designed components. Some might argues it’s against the original philosophy of having a utility-first framework, but I think it can acts as a nice complement, and also give a set of best practices designing with Tailwind. Tailwind UI is not free, but it might worth a try if we quickly need to build commons UI stuffs while keeping the same tool.

Last words and considerations

At the beginning, it takes a little time to get up and running when using this approach. Even if using Tailwind Intellisense, it’s hard to know what is existing in the library, so we have to go back and forth reading the docs. But as time passes, the overall design system becomes clear in our head, it’s always the same smart unit scale, with increasing gaps (1,2,3,4,5,6,8,10,12,16,20,24,28,32,40,48,56).

Even if the Tailwind doc is crystal clear, I found a little more helpful to use a cheatsheet that offers all the convenient class names with a simple search without the need of scrolling into every pages. I’m using this one but it’s not the only one.

Finally, I’m glad to have taken the Tailwind train, and will continue sharpening my workflow using it. Adam Wathan has made an exceptional work and have a Youtube channel with tones of live coding session so that we can watch how the creator itself overcomes design patterns.

Even if if I’m enthusiastic about Tailwind, I don’t want to spit over alternative solutions. I have been using a lot Semantic UI and Vuetify. These libraries have a lot to offers, and would be my go-to choice for quickly prototyping design without the need to do in-depth customizations though we can, it just take longer from my personal experience if I compare to Tailwind.

Let’s see how all of this will evolve in the future..

Home