Tailwind and utility-first frameworks have gotten a lot of buzz recently in the CSS world. Developers who dislike CSS love Tailwind since you don’t have to write any CSS, but why should frontend developers consider a tool that, at first glance, looks like inline styles?
I’ve been writing CSS for over two decades and using Tailwind’s abstraction layer so I don’t have to write CSS is a huge red flag. But after using Tailwind on a large project, I’ve learned some things from Tailwind about how to improve any CSS codebase, particularly using design tokens in your component system. We’ll discuss what I’ve learned, what I liked about Tailwind and what still concerns me. Is Tailwind something I will use on all future projects? Ehhh… maybe? We will discuss how to use Tailwind successfully, but we’ll focus on the wider topic of how to how to create successful CSS codebases with design tokens.
In this session we will cover the following topics:
- What is utility-first?
- What are design tokens?
- Creating a design system with tokens
- Naming things, again
- Cognitive load for abstraction layers
- Long-term frontend performance improvements
- CSS bundling vs. global CSS
- The trade-off of messy HTML
- Source order gotchas
- Dynamic classname gotchas