Introduction
I’ve been using Bootstrap since version 3 was new. Although I like Bootstrap, the truth is I never really loved it. Bootstrap is a proven framework, a workhorse you can always depend upon. But a few things left me wanting something more. Mostly the difficulty of customizing Bootstrap — customization with SCSS makes me feel sorta like I’m going against the grain. And the other customizing option — another style sheet full of overrides — seems wasteful. Additionally, there’s not a whole lot you can do about Bootstrap’s bundle size. In a way, I felt like I was sticking with Bootstrap mostly because I couldn’t find a better tool for the job.
Despite the fact that there has been a buzz around Tailwind for some time now, I’ve been hesitant to part ways with good ol’ Bootstrap. There was my typical concern about having to learn yet another framework. And all those utility classes in the HTML looked like a mess. But after an hour or so of playing around, I quickly began to like the Tailwind way of doing things.
Getting started with Tailwind
The two first steps to take to get started with Tailwind are: One, learn how to install it into your project, and two, learn the core concepts of Tailwind.
Initial Tailwind installation and setup is pretty straightforward. Tailwind’s installation guide covers it.
And yes, a small learning curve comes with the move to Tailwind, but after perusing the intro to the core concepts in the documentation you’ll be ready to jump in.
A few benefits of Tailwind
Here are a some of the benefits I noticed right away as I started to get the hang of Tailwind.
Smaller bundle sizes
Because of its efficiency, Tailwind creates remarkably small bundle sizes. Unlike with Bootstrap and most other CSS frameworks, Tailwind only generates the CSS that you’re actually using in your project. According to the docs, Tailwind bundles usually “are less than 10kB, even for large projects. For example, Netflix uses Tailwind for Netflix Top 10 and the entire website delivers only 6.5kB of CSS over the network.”
More consistent design
Because of the consistency of it’s CSS, it’s almost impossible to create an inept design when using Tailwind. The color palette is carefully curated. The spacing is based on quarters of a rem so that everything remains proportional. As for responsive design, Tailwind utility classes can be used in a simple, mobile first pattern that, once learned, is easy to apply.
Better team collaboration
In my opinion, Tailwind is one of the best CSS paradigms for teams. Although I like using “vanilla” CSS, it can be annoyingly ad hoc and create some friction in a team setting. If everyone on the team is good with Tailwind utility classes, then they can jump right into the project without having to scour multiple CSS files to learn the project’s CSS classes and patterns.
Fits the new component based front end libraries
To me Tailwind seems to fit in with the React, Angular, Vue libraries/frameworks better than Bootstrap and similar CSS frameworks. This is a subjective judgement, but seems to be commonly held amongst those who use React in particular.
A few notes on customizing
You can add your own CSS the “easy way” by simply adding it into the index.css file. For example, here’s how I might create my own link styles:
@tailwind base;
@tailwind components;
@tailwind utilities;
a {
font-weight: 500;
color: #646cff;
}
a:hover {
color: #535bf2;
text-decoration: underline;
}But this misses the point of Tailwind. When you “short circuit” Tailwind by adding your own styles you lose the efficiency of Tailwind. It’s worthwhile to learn how to custom Tailwind. See the docs here. So to add my custom link style, I’m going to use a Reusable Component Class like this:
@layer components {
.link-custom {
@apply font-medium text-blue-500 hover:underline hover:text-blue-700;
}
}Then using the class is as simple as:
<a className="link-custom">Link Text</a>Tips for Making the Switch
- Keep the docs open in a browser tab.
- Keep the official cheat sheet handy.
- Try the Tailwind Play playground.
- If you’re using VS Code there’s a Tailwind IntelliSense plugin.
- You can easily extend Tailwind by adding to the tailwind.config.js. For example, find a nice color palette on UI Colors, click the “Export”, then copy/paste it into your config.