Why I like Tailwind CSS with React?

I've been using Tailwind CSS with React for some months now. I've used it on my website inambe.dev and several of my clients' websites.

Here in this post, I'll be laying out what I liked about using Tailwind CSS with React and why I still want to use it for my future projects.

This post is mainly about Tailwind CSS not React.

Tailwind CSS

Tailwind is a utility-first CSS framework. What utility-first, in the case of Tailwind, means is that framework itself won't style any element but provide CSS utilities, in the form of CSS classes, for you to design UI yourself with consistency.

Unlike Bootstrap, which provides pre-styled elements' classes (like btn and form-control) with limited configuration capability, Tailwind doesn't style any element and also provides a great configuration capability.

Likes

I will not list the obvious likes of utility-first frameworks.

Configuration

Tailwind can very easily be configured to the extent that two websites would never look like that they're designed with the same framework. If you've ever been on the internet; you know a bootstrap website when you see one.

We can change or extend colors, fonts, spacing, breakpoints (for responsive design), and every other thing we have utilities for, without losing consistency. All in a single file. We can disable plugins we don't need or extend it with our own ones.

Tailwind provides utilities through its plugin system.

Responsive design

Responsive design is always the hardest job for me. Tailwind makes designing UI for different screen sizes a bliss! It has what is called a mobile-first approach to build the UI.

This one is the most important factor why I have and will use Tailwind.

// make font size large on screen size '768px' and above
<p className="text-base md:text-lg"></p>

Sane defaults

Even though we can configure Tailwind in almost any way possible, it has very nice and sane defaults. Its defaults can cater most of the needs for my projects by default.

For example, the spacing, I've never changed it for any of my projects because it works just as I need them to be even though I can change that.

Most of the times, I just change fonts and colors in the configuration file and I'll be ready to start developing.

VSCode extension

One of the most frustrating things that a utility-first framework can present is keeping track of the classes and remembering its names but this VSCode extension has, for the most part, solved it for me.

This extension provides many useful features like autocomplete, linting, and hover previews which can make developing with Tailwind a wonderful experience.

Directives

Directives are one of the most important features of Tailwind, which mostly helps with each project's needs without restricting anything. They can be used in many ways and for many purposes.

@apply directive is the one that I've used the most so far. We can create our own utility classes composing utility classes provided by Tailwind using @apply directive:

.btn {
  @apply py-2 p-4 font-medium;
}

At the build time, Tailwind will replace @apply and its proceeding utility classes with their respective CSS styles. The above code in a CSS file would produce:

.btn {
  padding: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-weight: 500;
}

Performance

One of the concerns we can have about a utility-first framework is that how it handles the unused utilities, which can greatly increase the size of CSS bundle.

Luckily, Tailwind can purge (remove from output CSS bundle) unused utilities with just changing/adding couple of lines of configuration.

For example, I've this configuration in one of project's Tailwind configuration file, which purges unused utilities from output CSS bundle:

...
purge: [
  "./src/**/*.js",
]
...

Conclusion

Tailwind with React has proven to be a very joyous experience for me to develop websites and apps with, due to reasons I've listed in the post.