Stacking elements with Tailwind CSS

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:

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

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

<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

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:

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

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

<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

Comments

[Hector Sosa]

I love TailwindCSS! I'd recommend trying to enable syntax highlighting in your code blocks by passing the language on them after opening the markdown syntax. Also including screenshots could make your content stand out.

We've built a completely free and OSS tool to build engaging screenshots faster. Check it out and let us know what you think! usescreenshot.app/github I'd appreciate if you give it a Star in Github if you find it helpful.