Use of `first`, `last` and `only` Variants

Use the `first`, `last`, and `only` variants in TailwindCSS to style elements based on their position in a list.

first, last, and only are useful variants in TailwindCSS that allow you to apply styles to elements based on their position in a list. These variants help you create more dynamic and context-aware designs by targeting specific elements within a group.

Only

First

The first variant is used to apply styles to the first element in a group of elements.

<div class="flex gap-2">
    <div class="size-6 rounded-full bg-gray-500 first:bg-red-500"></div>
    <div class="size-6 rounded-full bg-gray-500 first:bg-red-500"></div>
    <div class="size-6 rounded-full bg-gray-500 first:bg-red-500"></div>
    <div class="size-6 rounded-full bg-gray-500 first:bg-red-500"></div>
</div>

Last

The last variant is used to apply styles to the last element in a group of elements.

<div class="flex gap-2">
    <div class="size-6 rounded-full bg-gray-500 last:bg-red-500"></div>
    <div class="size-6 rounded-full bg-gray-500 last:bg-red-500"></div>
    <div class="size-6 rounded-full bg-gray-500 last:bg-red-500"></div>
    <div class="size-6 rounded-full bg-gray-500 last:bg-red-500"></div>
</div>

Only

The only variant is used to apply styles to the only element in a group of elements.

<div class="flex gap-2">
    <div class="size-6 rounded-full bg-gray-500 first:bg-red-500 only:bg-green-500 last:bg-blue-500"></div>
</div>

Real World Example

Here’s a real-world example of using the first, last, and only variants to style a list of user profiles.

Jacques Simba

Frontend Developer

Méschac Irung

Creator of Tailus UI and Tailtips

Glodie Lukose

Frontend Developer

<div className="min-w-72">
    <div className="group grid items-center grid-cols-[auto_1fr] gap-3">
        <div class="avatar sz-md fallback-neutral">J</div>
        <div className="border-b py-3 group-only:border-none group-last:border-none">
            <h3 className="text-title text-sm">Jacques Simba</h3>
            <span className="text-caption text-xs">Frontend Developer</span>
        </div>
    </div>
    <div className="grid group items-center grid-cols-[auto_1fr] gap-3">
        <div class="avatar sz-md fallback-primary">M</div>
        <div className="border-b py-3 group-only:border-none group-last:border-none">
            <h3 className="text-title text-sm">Méschac Irung</h3>
            <span className="text-caption text-xs">Creator of Tailus UI and Tailtips</span>
        </div>
    </div>
    <div className="group grid items-center grid-cols-[auto_1fr] gap-3">
        <div class="avatar sz-md fallback-neutral">G</div>
        <div className="border-b py-3 group-only:border-none group-last:border-none">
            <h3 className="text-title text-sm">Glodie Lukose</h3>
            <span className="text-caption text-xs">Frontend Developer</span>
        </div>
    </div>
</div>

Conclusion

Using the first, last, and only variants in TailwindCSS allows you to apply styles to elements based on their position in a list. This enhances your design flexibility and helps you create more dynamic and context-aware styles. By leveraging these variants, you can ensure that your application looks polished and professional.

On this page