[Suggestions] New utilities class "stack"

[Hardel-DW]

Feature Request: Introducing the stack Utility for Overlaying Elements

Summary

I suggest adding a new utility class .stack to Tailwind CSS, which leverages the CSS grid layout to stack elements directly on top of each other. This approach offers a modern and clean alternative to using absolute positioning with inset-0 for overlaying elements.

Description

The .stack utility would use the CSS grid layout to achieve element stacking without the complexities and limitations of absolute positioning. This is already possible using grid *:row-start-1 *:col-start-1 *:row-end-2 *:col-end-2
Here is a proposed implementation:

.stack {
    display: grid;
}

.stack > * {
    grid-area: 1 / 1 / 2 / 2;
}

This utility allows multiple child elements within a .stack container to occupy the same grid cell, effectively stacking them on top of one another.

Use Case

Stacking elements is a common requirement in web design for creating overlays, complex headers, or even for managing z-index stacking contexts more predictably. Here’s how the .stack utility could be used in HTML:

<div class="md:stack">
    <div class="stack">
        <img src="..." class="z-10 size-full rounded-[2rem]"/>
        <div class="w-full h-1/2 self-end z-20 rounded-[2rem] bg-gradient-to-t from-black/90 from-15% to-transparent"/>
        <div class="flex z-30 self-end justify-self-end p-6 text-sm text-zinc-500">
            <time>...</time>
        </div>
    </div>

    <div class="flex self-end flex-col p-6 z-20">
        <h2 class="text-xl font-semibold leading-snug tracking-tight">
            <slot/>
        </h2>
        <p class="text-sm text-zinc-500 w-5/6 line-clamp-2">Lorem Impsum</p>
    </div>
</div>

This example stacks two things together:

• A block itself made up of stacked elements, with an image, a black gradient and a date text.
• A piece of text containing the title and description.
  Using the breakpoint; in the mobile format the text content is placed below the image.

This is a fairly simple example, but it enables you to perform more advanced techniques such as parallax using only Tailwind. For instance, absolute positioning can be utilized as a complement to create this effect.

Benefits

• Simplified Markup: Reduces the need for multiple positioning utilities, making the HTML cleaner.
• Flexibility: Offers more control with breakpoints.
• More possibilities: Use this class to achieve more complex effects.

I believe this feature would be a valuable addition to Tailwind CSS, providing developers with more tools to create dynamic, visually appealing designs without relying on traditional positioning hacks.