Tailwind CSS is a CSS framework described as follows:

“A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup”. – Tailwind CSS official documentation

Tailwind’s goal is to “Rapidly build modern websites without ever leaving your HTML” (tailwind css 2022). If you ask me, this is quite a strong statement. To put this to the test, I decided to use this CSS Framework, and from what I have seen, so far, you could potentially build an entire project without having to write much CSS (well, maybe a little… but really not much compared to an average web development project that I am used to, to put it in a broad way).

 

To be fair, I am just a developer among so many and, I too, have my own prejudices and expectations. Maybe to be able to offer a more educated opinion, I propose looking at what Tailwind offers, look at some trends in the market to see what other developers think about it and look at some pros and cons. With this I’m hoping to provide some pointers so you can see for yourself if this would make a wise choice for your project.

 

What does Tailwind CSS offer?

 

Some core concepts

 

The three concepts that I have found most useful so far are (1) Utility First, (2) Responsiveness and (3) State Management. There are of course more and you can read all about them here.

 

1. Utility First

Tailwind offers a wide range of utility classes that help you work within the constraints of your system, thereby reducing the amount of CSS code you would need to write for styling your web components. The sets of classes include sizing, coloring, shadows, fonts among others.

 

<div class=”chat-notification”> <div class=”chat-notification-logo-wrapper”> <img class=”chat-notification-logo” src=”/img/logo.svg” alt=”ChitChat Logo”> </div> <div class=”chat-notification-content”> <h4 class=”chat-notification-title”>ChitChat</h4> <p class=”chat-notification-message”>You have a new message!</p> </div> </div><style> .chat-notification { display: flex; max-width: 24rem; margin: 0 auto; padding: 1.5rem; border-radius: 0.5rem; background-color: #fff; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .chat-notification-logo-wrapper { flex-shrink: 0; } .chat-notification-logo { height: 3rem; width: 3rem; } .chat-notification-content { margin-left: 1.5rem; padding-top: 0.25rem; } .chat-notification-title { color: #1a202c; font-size: 1.25rem; line-height: 1.25; } .chat-notification-message { color: #718096; font-size: 1rem; line-height: 1.5; } </style>

<div class=”p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4″> <div class=”shrink-0″> <img class=”h-12 w-12″ src=”/img/logo.svg” alt=”ChitChat Logo”> </div> <div> <div class=”text-xl font-medium text-black”>ChitChat</div> <p class=”text-slate-500″>You have a new message!</p> </div> </div>

Figure 1: The left hand side represents a component with custom styles. The right hand side represents the same component using Tailwind CSS utility classes (taken from the official documentation)

 

2. Responsiveness

Tailwind focuses on responsive design and makes use of utility variants in the form of conditional classes that are applied at different breakpoints.

 

<img class=”w-16 md:w-32 lg:w-48″ src=”…”>

Figure 2: The above example is taken from the official documentation, and illustrates how different utilities can be used with prefixes in order to render elements differently depending on the media size.

 

3. State Management

Tailwind reduces the amount of work related to state management, such as how an html element should look like when the elements are hovered over or active.

 

<button class=”bg-sky-600 hover:bg-sky-700 …”> Save changes </button>

Figure 3: The above example, also taken from the official documentation, shows how different prefixes can be used as pseudoclasses.

 

Tailwind CSS is customizable

 

Tailwind offers a way to customize some features  such as theme colors, fonts, spacing and many more. This can be done by modifying a JavaScript configuration file that can be used to set values for default global variables. This is usually called tailwind.config.js

 

module.exports = { content: [‘./src/**/*.{html,js}’], theme: { colors: { ‘blue’: ‘#1fb6ff’, ‘purple’: ‘#7e5bef’, ‘pink’: ‘#ff49db’, ‘orange’: ‘#ff7849’, ‘green’: ‘#13ce66’, ‘yellow’: ‘#ffc82c’, ‘gray-dark’: ‘#273444’, ‘gray’: ‘#8492a6’, ‘gray-light’: ‘#d3dce6’, }, fontFamily: { sans: [‘Graphik’, ‘sans-serif’], serif: [‘Merriweather’, ‘serif’], }, extend: { spacing: { ‘8xl’: ’96rem’, ‘9xl’: ‘128rem’, }, borderRadius: { ‘4xl’: ‘2rem’, } } }, }

Figure 4: The above example from the official documentation, illustrates the usage of a configuration file to set or override global variables.

 

Grid and Flex Displays

 

Unlike some other frameworks that offer column rendering and a defined set of columns, Tailwind offers a more dynamic and flexible approach. You could render several columns using the flex display or you could use the grid display allowing you to control the gap between the columns and are not limited to a particular number of columns.

 

The trends

 

According to the State of CSS 2021, Tailwind became the fastest growing in popularity when compared to similar technologies. This is based on 4 measurements taken from responses to a survey from a wide variety of CSS developers across the world. These parameters include satisfaction, for which Tailwind scores at 78% (first place); interest, where Tailwind CSS gets a score of 58% (first place); usage, with a score of 39% (second place in this rubric after bootstrap); and finally awareness with an appalling 98% (second place after bootstrap). Bootstrap still remains the most used CSS framework and Tailwind seems to be closing the gap in the competition.

 

Figure 5: the image taken from “The state of CSS 2021” shows the satisfaction rate and the usage of Tailwind as of the release of the survey results.

 

Pros and cons

 

The following is a personal appraisal of what I have experienced using Tailwind CSS. By no means do I expect any reader to agree with me here. I’m just offering some conclusions based on my own experience with Tailwind

 

Pros

1. Greater Control and Customization

By default, similar frameworks have a theme that can be customized. With Tailwind CSS, you have a large set of utilities and are not constrained to work under the paradigms that Frameworks like Bootstrap or Materialize work under.

 

2. Responsiveness and faster styling process

As mentioned above, it offers responsive utilities as well as other cool features such as pseudo-class prefixes, so the overall time spent styling components is significantly reduced.

 

3. Well documented and good community support

I have found the documentation to be complete for the most part. There are already – since its launch in May 2019 – plenty of examples to draw from and answers provided by the community.

 

Cons

1. Feels like inline

A common complaint that I have seen in blog posts and articles, is that some developers find that using Tailwind CSS feels a lot like writing inline styles. This can be understood considering that a lot of class names are used to affect one CSS property at a time. To be fair, I believe this is a tradeoff of the “Utility First” approach, but I can live with that.

 

2. Steep learning curve and relies on having CSS experience

Given the large set of utilities provided by the framework, it does take some time and practice to feel comfortable using it even for an experienced developer.

 

Another thing to consider is that most classes are named after the property affected, e.g. flex, block, inline, etc. If a developer does not know CSS or is at a beginner level, then it may be difficult to make sense of the “Utility First” approach.

 

3. Does not have an out-of-the-box component library

Unlike Bootstrap, Materialize CSS, or other similar frameworks, Tailwind does not have a component library that could handle elements like popovers, modal dialogs, or toaster notifications or forms. This is not to mean that there are no implementations of these elements, but the approach is different. You may need to rely on other libraries or implement these yourself. However, there exist out-of-the-box component libraries that use Tailwinds such as Tailwind UI or Tailwind Component.

 

Note: The last 2 examples may require a premium version.

 

Wrap up

 

Tailwind is a CSS framework that uses a “Utility First” approach by offering a wide variety of classes available for styling components in a responsive manner. The use of this framework has grown significantly since its creation in 2019 and seems to be growing steadily. Tailwind is customizable, responsive, and well documented. As a trade-off, you also may have to deal with a learning curve that presupposes an above beginner CSS knowledge and does not have an out-of-the-box component library. With this information in mind, I would still conclude that it is worth trying and it can speed up development significantly once you get that hang of it.

 

References

• Rapidly build modern websites without ever leaving your HTML. Tailwind CSS. (n.d.). Retrieved February 19, 2022, from https://tailwindcss.com/
• The State of CSS 2021. (n.d.). Retrieved February 21, 2022, from https://2021.stateofcss.com/en-US/