Tailwind CSS is an open source CSS framework. The main feature of this library is that, unlike other CSS frameworks like Bootstrap, it does not provide a series of predefined classes for elements such as buttons or tables.

Tailwind CSS — A Utility First CSS Framework

Tailwind CSS, as per their own website is a “utility-first CSS framework” which provides several of these opinionated, single-purpose utility classes that you can use directly inside your markup to design an element.

Some of the utility classes that I frequently use these days are:

• flex: Used to apply Flexbox to a <div>
• items-center: to apply the CSS property align-items: center; to a <div>
• rounded-full: to make an image circular, and so on

Seriously, it’s not possible for me to list all of them because there are so many of these utility classes. But the best part is, we do not have to write these utility classes ourselves and keep them in any global CSS file. We directly get them from Tailwind.

You can get a list of all the utility classes Tailwind has to offer from the documentation page. Also if you are working in VS Code, you can install an extension called Tailwind CSS IntelliSense and it will give you auto-suggestions as you keep typing the utility classes, as shown in the image below.

Tailwind CSS makes it quicker to write and maintain the code of your application. By using this utility-first framework, you don’t have to write custom CSS to style your application. Instead, you can use utility classes to control the padding, margin, color, font, shadow, and more of your application.

Is Tailwind better than material UI?

Consider Material UI if you are an avid React user and don’t have the time to build a custom UI from scratch. Consider Tailwind CSS if you want to build a custom UI within your markup while writing minimal custom css.

Advantages of Tailwind CSS

Just-In-Time (JIT) mode provides lightning-fast build times

Prior to Tailwind v3, it used to purge through all the styles to remove any unused styles, so that the production build remained as small as possible.

According to Tailwind, the production build used to be between 5–10 kB. But that’s the story in production. In a development environment, CSS might get really big especially if we use a lot of personalized configuration.

With v3 and above, Tailwind released a new feature called the Just-in-Time compiler. The JIT compiler avoids compiling all the CSS upfront and compiles only the CSS as and when we need it.

This results in lightning-fast build times in all the environments. And as the styles are generated as and when we need them, there is no need to purge unused styles. This means that the CSS in all the environments will be the same. This helps us get rid of the fear of any important CSS getting purged in production.

It’s opinionated and flexible at the same time

Tailwind CSS is opinionated. It does specify some constraints when it comes to styling, and if you ask me this is good as it helps us keep the design part to those who actually understand it.

Just look at one of the utility classes to add a box-shadow to your <div> (source):

As you can see, there are only 8 variants of shadow that Tailwind provides. There are preset values for vertical and horizontal offset, blur, spread, colour and opacity. That is why Tailwind is opinionated.

It tries to give an opinion about what property values to choose from on almost all the styling properties out there. And believe me, for most of the cases, these 8 variants (for box-shadow) will be more than sufficient to come up with a great UI.

For example in the above hands-on example, I have used shadow-lg in the main parent <div> to get that nice outer box-shadow.

Using the same variant of a particular utility class at different areas in the UI also ensures uniformity across the whole application and results in a better UX.

But in case you need some really customised value for any particular style, you can get that by adding a customized theme in the tailwind.config.js. For example to get a shadow-3xl (Tailwind does not provide shadow-3xl out of the box) you can add the following lines in the module.exports in tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      boxShadow: {
        '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
      }
    }
  }
}

And now with the advent of JIT, you can also use an arbitrary value inside square brackets [] like the following:

<div class="shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)]">
  // Rest of your code goes here
</div>

Using arbitrary values may be useful when you need a specific style at only a few places. And in this case, creating a theme for it in the tailwind.config.js might seem unnecessary.