Tailwind: The Base, the Components and the Utilities

From the director of “A fistfull of classes”

Photo by Pankaj Patel on Unsplash

If you’re starting with Tailwind CSS on your development machine, you may have noted the very first lines you write to handle your styles in your project is importing the three main layers of the framework: “base”, “components” and “utilities”.

This small article talks about what are those, and why you may want to override them.

The Base

The base is the first Tailwind CSS layer. It basically holds Preflight, which is the CSS in charge to reset the styles of the browser to something sane and constant between browser engines. Basically, what you see is what you will get on all devices.

This is a good place to modify a base style, like changing how images behave by default — which with Tailwind CSS these are considered blocks — or if paragraphs should have a bottom margin.

Note that here is very useful to add or modify anything want to make something more special than the default browser handling, but without going into full styling, since these styles must be overridable.

The components

This is tiny layer that only includes the container class, which is in charge of modifying its width depending on the browser size. You usually see it being used to center content:

<div class="container mx-auto px-2 md:px-0">
  <!-- Content -->
</div>

In this layer you should add your own extracted components. For example, you could add a class called btn that would transform a link or a button into something that feels more like an actual pressable button.

The utilities

This is the meat of Tailwind CSS. Here resides almost all of the classes you use to style your HTML: from padding and flex classes, to shadows and colors, to pseudo-classes to animations and transitions.

The utilities layer is a good place to add simple utility-based classes. For example, you can add a class that makes a scrollable block to snap to its content with scroll-snap-type.

The screen

The screen layer is the place where all the utilities and components that can vary by media query breakpoints are added, like md:flex-row.

On most scenarios, you won’t need to add or change this. Tailwind CSS adds these last since this way these can easily override its base style, like md:flex-row being overridden by lg:flex-row in a larger screen. This is explained by this StackOverflow answer (emphasis mine):

(…) Specificity is defined based on how many IDs, classes, and element names are involved, as well as whether the !important declaration was used. When multiple rules of the same "specificity level" exist, whichever one appears last wins.

If you’re looking a place to override or add breakpoints, you should head to your tailwind.config.js and add them on the theme.screens part.

Adding things to the layer via Javascript

One of the neat things of Tailwind CSS is that is very clear where you can your own code. If you’re doing something basic, using @layer and @variants is totally fine in your CSS, since most of the time you won’t need anything complex.

On the other hand, if you need to interact with each breakpoints, pseudo-classes, dark themes or colors, then you can create a plugin with more flexibility.

If you’re creating a plugin Tailwind CSS, you may use this instead of just distributing CSS, since a developer may have different configurations and styles that may conflict.