Overcoming Challenges through Modern Technologies
In this series, we highlight the technical challenges faced and how we utilized different modern technologies to overcome them. We discuss these technologies to explain how they solved our particular problems and cover other beneficial features these pieces of tech contain.
ICYMI: LaunchDarkly and feature flagging were covered in Part 1, Web Components with Lit in Part 2, and today we’ll wrap up with Tailwind CSS.
Pssst…using ChatGPT I also generated another version of this blog about Tailwind CSS. Check it out here!
Backstory (Recap):
In 2021 we were renovating the user interface (UI) of our web applications. This was not a small task as we have numerous applications across several different technologies. Our design team had already laid the groundwork for the designs, icons, states, color palettes, and such; while we began planning how to overcome two major challenges.
First, we needed the ability to simultaneously support the existing UI as well as the new UI and switch back and forth at runtime. (Covered in Part 1 of this series.)
Our next challenge involved our navigation menu included in the redesign. At the time, it was replicated and reused across multiple applications for a seamless transition between applications but was a maintenance headache. We covered solving this challenge in Part 2; finally, we’ve added another useful technology in Tailwind CSS to assist us with speed to implement designs and style reusability with utility classes.
Tailwind CSS
Right away, Tailwind CSS feels like what CSS should be. Tailwind CSS is a CSS framework that is built for utility, reuse, and consistency throughout the development process. It has loads of built-in utility classes intent on being reused in order to reduce one-off styles that may not be consistent with the rest of your application. Most of the utility classes are also intuitively named and are frequently easier to remember than the underlying CSS properties themselves.
If you want to add margin-right to something, it is mr-2 (m is for margin, r is for right, and 2 is the size based on the Tailwind CSS default spacing scale). If you want padding-left for the same size then it is pl-2. Now, a pattern is recognizable: p is for padding, l is for left and 2 is again the size based on the Tailwind CSS default spacing scale. Another plus of Tailwind is that the sizes included in the default spacing scale are rem based!
All of Tailwind CSS follows the above pattern.
Another super handy feature of Tailwind CSS is the @apply feature. It is incredible. The @apply feature allows you to leverage and reuse the utility classes from within a .css file itself. See below:
.some-button {
@apply py-4 px-2 text-sm;
}In this example, we were able to use the padding-y, padding-x, and font-size utility classes made available by Tailwind CSS. This allows you to apply those utility class styles to any other selectors — that’s awesome! Are you sold yet? I definitely went off the deep end with this feature until seeing their documentation on when to use it.
While Tailwind CSS has so many more features, I want to intentionally keep it simple. The features above will generally reflect 99% of your experience with Tailwind, and it’s worth it just to leave it at that, and you may not truly understand the intuitiveness, ease, and value you will get out of Tailwind until you feel it for yourself and get your feet wet.
Here are some of the other biggest selling points; the “must haves” so you know that Tailwind covers questions you may have about what it can or cannot do.
- Tree-shaking, which they refer to as “purging” — you only package up and send the parts of Tailwind you actually use, which minimizes the extra bytes you ship to the browser
- Override the built-in utility classes
- Extend the built-in utility classes
- Generate your own custom utility classes
- Plays nicely and integrates well with CSS custom properties
Conclusion
In conclusion, Tailwind CSS is a developer’s dream UI kit. We utilized and enjoyed it fully while renovating our entire set of applications. We used not only Tailwind CSS but also LaunchDarkly and Web Components with Lit to do so.
Historically, I’ve been a fan of pure native technologies; there are many well-written modern technologies out there today to leverage instead of writing everything from scratch. Thank you for sticking around for all three parts of this series. I hope you learned something or were inspired to research new technologies.
Feel free to reach out if you have any feedback or questions, or if you just want to debate the meaning of life.
