Stacking elements with Tailwind CSS
Tags: tailwindcss, css, html
Published: 2023-05-24 08:44:40

Stacking elements on top of each other is a common pattern that we all use regularly. There are two main approaches to achieving this with Tailwind CSS. We'll use a typical hero section layout with a background, a gradient layer, and some text as an example.

## 1. Absolute positioning

Absolute positioning is the 'traditional' way to stack elements. It's very flexible, but can be a pain to make responsive, and centering elements can feel a little hacky.

Let's start with our background:
```html
<div class="h-screen bg-slate-500 relative">

</div>
```

We make this our relative parent simply by adding the `relative` class.

Now let's add our gradient:

```html
<div class="h-screen bg-slate-500 relative">
  <div class="bg-gradient-to-t from-slate-800 to-transparent absolute inset-0"></div>
</div>
```
This will give us a dark gradient effect from the bottom. We position it absolutely to fill the container using `absolute inset-0`.

Now for the text:
```html
<div class="h-screen bg-slate-500 relative">
  <div class="bg-gradient-to-t from-slate-800 to-transparent absolute inset-0"></div>

  <h1 class="text-6xl text-white font-bold absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">Tailwind CSS</h1>
</div>
```
After the text styling, we give our text `absolute` to position it absolutely, then position it halfway in on both the X and Y axes with `left-1/2 top-1/2`. However, since the origin point for the text is the top left corner, this results in the text appearing off-center. To remedy this, we use `-translate-x-1/2 -translate-y-1/2` to move the text left and up by half its own width and height.

[Here it is in action](https://play.tailwindcss.com/tMzD48IObS)

This is a long walk for a short glass of water. Luckily, with the advent of CSS Grid, we have a more elegant solution...

## 2. Stacking elements with Grid

As well as making... grids, CSS Grid also allows us to stack grid elements on top of each other. The properties that allow this, `grid-template-areas` and `grid-area` don't have utility classes in TailwindCSS, but that's not a problem thanks to v3's arbitrary classes feature.

Let's define our container again:
```html
<div class="h-screen bg-slate-500 grid place-items-center [grid-template-areas:'stack']">
 
</div>
```
Here we set up a grid container with `grid`. `place-items-center` will ensure our text is automatically dead center on the screen without any translate shenanigans. The real magic is in our arbitrary class `[grid-template-areas:'stack']`. This sets up a single grid area called `stack` - you can call this whatever you like.

Now we can add our gradient:
```html
<div class="h-screen bg-slate-500 grid place-items-center [grid-template-areas:'stack']">
  <div class="h-screen w-full bg-gradient-to-t from-slate-800 to-transparent [grid-area:stack]"></div>
</div>
```
Here we use another arbitrary class to tell the browser that this element belongs to the `stack` grid area defined in the parent.

And now for the text:

```html
<div class="h-screen bg-slate-500 grid place-items-center [grid-template-areas:'stack']">
  <div class="h-screen w-full bg-gradient-to-t from-slate-800 to-transparent [grid-area:stack]"></div>

  <h1 class="text-6xl font-bold text-white [grid-area:stack]">Tailwind CSS</h1>
</div>
```
This element in particular is much cleaner - all we need to center it is the same arbitrary class as the gradient. `place-items-center` on the parent takes care of the rest!

[Here it is in action](https://play.tailwindcss.com/KXabnq3Ykq)