Styling Web Apps with Tailwind CSS

Keeping application styles scalable is always a difficult task. Many tools were created trying to solve this problem in some way, such as SASS, CSS Modules, CSS in JS frameworks and so on.

However, these solutions are still not ideal, as the amount of written code remains large, breaking styles due to small changes is a common issue and it is difficult to maintain styles reusable.

An approach that has been gaining prominence in recent years has been the utility-first CSS. In this approach there are hundreds of predefined classes for the most diverse needs, such as changing font size and style, applying spacing, changing colors, etc. In this way the styles become much more concise and easier to maintain. And that is exactly what Tailwind CSS proposes. Observe the code below and its result:

Styling a page the classic way

With Tailwind the same result could be achieved by the following:

Styling a page the tailwind way

Note that custom classes were replaced by predefined utility classes, with more granular goals. Applying styles in this way makes its maintenance and reusability easier.

So far no news. There are already utility-first frameworks on the market, like Bootstrap and Primer. The big difference is that Tailwind CSS is a highly customisable low-level framework. There are no predefined components, but several predefined atomic classes and the possibility to freely configure and extend these classes. Look at the following code:

A more complex example. Try changing browser width…

In this example a component was create for the “View” button and a utility class to add shadow to text. Note that this button is simply a CSS class that uses other existing classes to compose its style.

Another plus is the possibility of class variations. For example, to change layouts according to media query one can apply flex md:block (try changing browser’s window width in the last example), to :hover selector effect it’s possible to use hover:bg-white, and so on.

Tailwind customisation possibilities are pretty extensive. It is possible to configure selectors, media breakpoints, colors, spacing, create classes for @ rules (@supports, for example), add selectors and so on. More complex customisation is also supported through PostCSS (after all Tailwind CSS is a PostCSS plugin).

All this atomisation and customisation of styles combined with its fast learning curve make Tailwind at least a quite interesting approach.