Over the last few months, I've had the pleasure of writing a few blog posts covering how to build some simple components with Tailwind CSS. While practicing building components is always a great start, there's nothing quite like using a new framework in a real project to get a feel for what it's like to use.
Fortunately, I've been able to use Tailwind in two projects now, one for work and the other on the side. In this post, I'll cover some of my takeaways about what worked well, what didn't, and everything in between.
1. My Development Speed Has Increased 3x
No joke, I'm at least 3 times faster at building UIs now. In the past, my development flow looked likes this: tinker in the browser with a few classes, quickly add the styles to my stylesheets because I couldn't keep them all in my head, add classes to my HTML, and then I'd keep tinkering until I got it all right.
With Tailwind, I've entirely removed the writing CSS step (at least while I'm getting the first iteration done). Additionally, I don't have to keep selecting elements with my dev-tools to look at the styles panel in order to see what styles they have. Because I'm using descriptive utility classes in my HTML, I can just read it and have a clear picture of the styles I'm using.
Furthermore, when I do have to write some CSS, I don't have to think very hard about what I'm going to name a class or how I'm going to keep it consistent with the rest of my styles.
I'm typically only adding another utility class, which names itself. Or, if I am extracting a component, then the name is evident because it's describing the component!
Regarding consistency, since I use Tailwind's @apply helper to use the utility classes to construct components, I never have to worry about my "custom" CSS getting out of sync with the rest of the utilities.
Putting all of these little time-savers together has made a tremendous impact on my development speed. I've been able to crank out UIs faster than ever, and my stakeholders couldn't be happier.
2. My Component Classes Are Better
While I could spend the rest of this post waxing poetic about utility classes, I still find myself reaching for component classes.
I've found that I typically create component classes after I've created a couple of UI elements and have started to notice the similarities between them. From there it's super easy to use Tailwind's @apply to extract the utilities I already used into a component class.
The big advantage of this approach is that my component classes tend to be much more atomic and "self-sufficient" than they used to be. For example, let's say we've styled a button with Tailwind's utility classes like this:
<button class="rounded tracking-wide px-4 py-2 text-white bg-blue hover:bg-blue-dark my-2 mx-auto">Sign Up</button>
Now, we can extract this to a component class pretty easily like so:
//CSS
.btn {
@apply .rounded .tracking-wide .px-4 .py-2;
}
.btn-blue {
@apply .text-white .bg-blue;
}
.btn-blue:hover {
@apply .bg-blue-dark;
}
//HTML
<button class="btn btn-blue my-2 mx-auto">Sign Up</button>
Much clearer! But, notice that I left the margin utility classes on the button. This example gets right to the heart of what I mean by "self-sufficient" component classes.
Before Tailwind, I could never figure out where those margin styles belonged. It was obvious that we shouldn't put them on the .btn or .btn-blue classes because then they might not be reusable in their next context.
But then it also never really felt right including them on a parent element either. What if the parent component needed to be slightly different between pages? Or, what if one version had the button and a slightly different version didn't?
With Tailwind, I don't have to worry about this anymore. I can DRY up my HTML by extracting component classes and leave behind the utilities that make sense in that context.
3. If I'm Going To Nitpick, The Height Utility Defaults Annoy Me
I wish everything could be sunshine and rainbows, but alas this is still real life. The only real complaint I have with Tailwind is that I think that the height utility defaults should include percentage units just like the width utilities do.
I found myself, on multiple occasions, attempt to use percentage heights as I would with the width utilities, and I was always disappointed when nothing worked.
I know this is super nitpicky, but that's a testament to how well the rest of the framework has been thought out.
4. Have It Your Way: Customize Anything
Fortunately, my height issue isn't too much of a problem because I can add them just the way I like in the config file. This is amazing.
Being a developer, we spend a lot of time configuring and modifying package and framework defaults. And I'm sure we've all hit that point where we couldn't configure a package to do what we needed. That really, really sucks.
With Tailwind, I haven't had that issue yet. Every time I've needed to tweak an existing style, or add some more variations to a color scale, or add in some new utilities, I have been able to do it in seconds.
This is an incredible feat of engineering and forward-thinking by the Tailwind team, and they deserve all the praise they can get.
5. The Community Rocks
Getting to know the Tailwind community on Slack and Twitter has been an absolute delight. I'm not sure what it is, but Tailwind has managed to attract extremely helpful and friendly developers.
Every day, I see this community help one another in ways that other communities I'm a part of just don't. Folks are answering questions, spinning up repos and code pens, building packages and components, and just being helpful and fun to be around.
Plus, the Tailwind team has been incredibly quick to offer help and make changes and fixes when needed.
This isn't necessarily a deal-breaker for any framework, but it's nice to know that there's a group of people willing to help you when you have a problem you can't figure out.
Bonus Takeaway: PurgeCSS And Laravel Mix Make life Easy
This isn't directly related to Tailwind, so I'm calling it a bonus. I've been using Laravel Mix and Spatie's PurgeCSS wrapper package to compile and "minify" my CSS, and it has been excellent.
Laravel Mix makes it so easy to get up and running and has come in clutch for some esoteric use-cases where I've needed to manage some external CSS dependencies. On top of that, it made it so easy to drop in Spatie's package.
Spatie has worked their magic again to routinely reduce the size of my compiled CSS by roughly 10x. These are incredible savings that I'm happy to pass on to my users.
The Wrap-Up
The moment I tried Tailwind CSS to build some simple components, I knew it was a game-changer. Using it in real projects, I've seen the benefits. I'm writing my UIs faster; my CSS is way more concise and maintainable; I can customize it however I need, and I've made a bunch of new friends along the way.
I hope that these takeaways can help you use Tailwind for your next project. As always, feel free to ask me any questions on Twitter. And until next time, happy coding!