Tailwind CSS — next-gen functional CSS framework

CSS is one of three basic foundations of web development. Over the years we have developed many ways of making the design of our sites. Starting with CSS frameworks like Bootstrap or Foundation, through various methodologies like SMACSS or BEM to generating classes dynamically like CSS-in-JS.

What if we combine:

• solid framework with built-in abstractions for grid, media queries and interface state,
• consistent convention of class naming to flatten learning curve of a new tool,
• generated files with adjustable range of classes depending on our needs.

Sounds like a perfect solution? It’s possible and it’s done in Tailwind CSS.

Benefits of using functional CSS

There are a couple of advantages of this approach. Let’s start from the top. Functional css is also paired with atomic design or utility-first class. These are single-purpose classes. It means that to set a border we create three separate classes. Every class sets different css property: border-width, border-style and border-color

Our CSS can look like this:

Functional css classes creation

Note that the classes describe their purpose, for instance when we make border-red class it will cover color of our border. Then we can create simple markup using defined classes:

Using functional css classes

When we use BEM:

Sample BEM class

The same markup as in the previous example:

Using BEM class in HTML

Reusability of the classes

By definition, classes are meant to be reusable and they were made to use them in many places on the site. Naming them by using the area where they will be placed is a great waste of their natural reusable purpose. That’s why functional CSS drives so much attention and popularity.

Possibility to compose an interface

Let’s extend our previous example by adding 3 more classes to it.

Extending the previous example with new classes

Now we can compose our design in many more ways:

With extra 3 classes we can achieve much more flexible layout via composing rather than defining an individual class for each different div variant. In a real world app this effect is multiplied.

This simple example shows how functional css works. Let’s look at the Tailwind CSS, which was built on the basis of this concept, in depth.

Introducing Tailwind

Tailwind combines the latest techniques to bring the best experience while creating an interface. Having intuitive and rich syntax mixed with easy installation process and generated output, css file depends on our setup. It’s perfect for prototyping but also for rich, mature projects. 20k stars on github shows that it’s choosen by a vast amount of various developers.

I will cover how tailwind deals with the main problems developers have these days.

Syntax

The first problem is a learning curve. This problem refers to every tool we have, from frameworks to small packages. We need to learn how to use those tools, what we can achieve, the options we can set and how we can follow the best patterns. A good tool should be easy to use and to understand.

Let’s see how tailwind’s syntax looks like:

Setting text small and the color of the text gray

We have a bunch of classes. Each of them corresponds with a unique attribute set in CSS. For example, text-* classes are responsible for manipulating the text. By using them we can change base colors eg. text-white or alignment text-center.

We can see that the syntax follows some pattern. The first keyword refers to the type of properties we can set with the class, the second keyword refers to the value which we want to set.

But watch out! There are some exceptions. Flex, absolute or uppercase are the examples of one-keyword classes. Those classes don’t follow the pattern I have described above. That’s why, they are self-descriptive.

Tailwind can do way more than adding colors or simple properties. We can specify and then use media queries by using intuitive classes directly.

First, we need to add breakpoints to our tailwind’s config file. Here’s what I usually add:

Changing tailwind’s configuration object

Feel free to add your own breakpoints. This will generate classes with defined names as a prefix. Then we can use those classes as follows:

Using values on certain breakpoints

The above code will make extra large margin for all resolutions. Then it will set up width to 50% on small screens and above. After that it will change left margin to small on extra large screens and above. As you see, setting properties to match user’s screen is very easy. We do it via adding proper prefix to the class. It’s much cleaner and expressive way to deal with media queries.

Adjustable configuration

Tailwind provides configuration file where we can set the colors of our application, add screens for media queries or custom variants for classes. All options that can be set up in configuration affects the output of our bundled css code. It’s because classes are generated according to what we have set up in this file. Let’s see how it works:

Setting variants of generated classes

Then generated bundle will contain classes as follows:

For all variants that use responsive, tailwind generates classes that reflect screens’ names we use in our project. Variants can be hover, focus, disabled and more.

Note that for each variant we generate sets of classes corresponding with what we have set. This leads us to shrink the size of the output css or increase it, if we are not careful about that.

In configuration file we can extend colors of our app.

Classes are generated and we can use this color:

Extended color class usage

You can set much more. All configuration options can be found here.

Summary

• Consistent class syntax — all classes are self-descriptive and created in an intuitive way. This will speed up the development after reaching a low entry level.
• Generated bundle — the output CSS file only contains what we really need, no more unused classes and classes which do the same thing but have different names.

As you see, there are lots of benefits from using tailwind in a project. You can see more on the official site.