Tailwind: The Base, the Components and the Utilities

From the director of “A fistfull of classes”

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.

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>

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 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.

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.

Graphic Designer graduate. Full Stack Web Developer. Retired Tech & Gaming Editor.