A step into the future: TailwindCSS presents just-in-time compilers

The Tailwind Cascading Style Sheets (CSS) framework is very popular with developers: With its utility-first philosophy, it relies on customizing HTML markup using dozen of CSS classes instead of using predefined components like Bootstrap or Bulma to put. With a just-in-time compiler (JIT), two central points of criticism should now disappear.

This post is part of a series of articles to which heise Developer invites young developers – to provide information about current trends, developments and personal experiences. The “Young Professionals” series is published on a monthly basis. [br]Are you a “Young Professional” yourself and want to write your (first) article? Send your suggestion to the editors: developer@heise.de. We are at your side when you write.

When creating HTML components, developers often get into the mess of needing a separate CSS class name for each element (see Listing 1). This not only leads to sometimes extremely useful naming, but ultimately doubles the structure of the component in the stylesheet. This problem is as old as CSS itself, and therefore various strategies have been developed to solve it: The best known of these is probably the “Block, Element, Modifier (BEM)” method. It divides DOM elements into three categories: Blocks (such as .header {}), Elements that are used in such blocks (e.g. .header__title {}), and possible modifiers (such as .btn--orange {}), which vary the basic shape of elements.

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="Chat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">Chat</h4>
    <p class="chat-notification-message">Sie haben eine Nachricht!</p>
  </div>
</div>

Listing 1: CSS component for a chat notification

The utility-first idea of ​​TailwindCSS turns away from naming strategies and avoids specially created classes. Instead of assigning components to a specific CSS class, the styling can be done directly in the HTML markup. For example, a text is represented by the class text-center centered and using font-bold Printed in bold (see Listing 2). What at first glance just looks like fancy inline CSS has several advantages, according to the Tailwind developers. Fixed sizes and units help to avoid so-called magic numbers and to create a consistent color and measurement system. In addition, all Tailwind classes are responsive and can therefore be individualized for certain end devices, viewport sizes or client preferences – such as dark mode. States such as hover or focus cannot be addressed separately with pure inline CSS, but Tailwind classes allow this: A button can change the background color when hovering, for example.

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="Chat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">Chat</div>
    <p class="text-gray-500">Sie haben eine Nachricht!</p>
  </div>
</div>

Listing 2: Chat notification implemented with TailwindCSS

Tailwind founder Adam Wathan himself regularly advocates trying out the framework on Twitter and in his talks: The convenient and fast use speaks for itself and inspires, so that the obvious points of criticism quickly disappear. Furthermore, some of the advantages of Tailwind only become apparent when you use it. The extensive documentation not only teaches the framework, for example, but also brings users closer to pure CSS. Tailwind avoids a frequently mentioned weakness of other CSS frameworks, namely the excessive abstraction of the actual CSS code and the lack of involvement with the language. Another great advantage is that HTML markup created with Tailwind can usually be easily copied between projects: there is no need for time-consuming compilation of the CSS classes used in the style sheets.

Many developers seem to be convinced of Tailwind’s philosophy: “In the wild”, pages created with Tailwind are increasingly being found by well-known companies and organizations such as Clubhouse or NASA’s Jet Propulsion Laboratory.