garytalmes.com

Getting Started With Tailwind CSS

I've been working with Tailwind CSS for a while now -- in fact I used it for the re-design of this site -- and I thought I would describe what I like, and don't like, about the framework.

First, for those who haven't worked yet with Tailwind, it is a "utility-first" css framework. This means that class names do not have semantic value, instead class names directly invoke specific style properties. For instance, consider:


        

These Tailwind classes will have this div render with a top margin of 4 (I'll discuss Tailwind units below), a 1px solid border of medium gray (Tailwind colors are discussed below also), a position of relative, padding-left and padding-right of 3, and padding-top and padding-bottom of 5.

Tailwind was in part created to address how confusing (and time-consuming) it can be to manage styles the traditional way in large web projects. Simply coming up with names for specific classes, and remembering those names, can be a chore.

It can be also be difficult hard to remember what classes inherit from others, and sometimes even what a given class is supposed to render. And if you need to modify one specific element differently from others in its class, you may need to add yet another class (or some other selector) to what is probably a bloated style sheet already.

Finally, the traditional way of doing stylesheets was more appropriate when web pages were built as a cohesive unit. Modern frameworks like React, Vue, and Angular are component-based. Styling is done now at a component rather than a page (or site) level.

Tailwind gives you direct control over styling at the component level, but with a set of shorthand property names that speed up getting style code in place. If a component is re-used many times, as most are, there's less need for semantic classes, and a more declarative approach does make sense.

Tailwind also has built-in selectors to handle responsiveness, and has a unified unit system to help ensure that things line up correctly.

And if you do find yourself repeating the same collection of utility classes over and over, Tailwind has an @apply feature where you can "bundle" those classes together and consolidate things.

That's not to say that Tailwind is ideal for everyone. Tailwind is best suited to implementing a design system for one, specific site at a time, with defined design guidelines. Because Tailwind utility classes are compiled into standard CSS at build time, they cannot contain dynamically-defined values. This isn't a problem if you know exactly what your site should look like; but it's virtually impossible to build a true dynamic style system, like Bootstrap or Chakra, using Tailwind.

And make no mistake, Tailwind's use of multiple (sometimes dozens of) utility classes for any one HTML element can be horrible to look at. You can often end up with something like this:


        

Surprisingly though, this system gets easier to look at and work with over time. And there is an undeniable joy at being able to style a component so quickly, and without going to a separate stylesheet. Tailwind also handles responsiveness, pseudo-effects, and animation in a fairly intuitive way.

Getting Tailwind configured for your environment can be a bit tricky, but the docs are solid in this regard, and once you've done it a couple of times, it becomes pretty easy. Tailwind can also be customized for specific color schemes, sizing and spacing preferences, and more.

If you're interested in trying Tailwind, I recommend:

  • Start with a small site, with clearly-defined design parameters.
  • I spent a lot of time trying to find ways around using all the class names. Finally I realized that this is the essence of Tailwind, and it's not to be avoided. Everything works better when you realize that.
  • Don't plan on building elements that are dynamically-styled, Tailwind isn't really suited for that. You can plan for some small variations, but you should be ok with a clearly-defined, but mostly-static, site design.

Author: Gary T Almes

I am the developer and owner of this web site. I've been working in the web development space for 35+ years and have experience in just about all phases of any development operation. I've owned my own web dev shop, been a senior level product and team manager, served as a senior developer, and I currently also teach MERN-stack web development in partnership with major universities. I'm available for occasional and regular development, management, or consulting needs.