Use of `empty` Variant

Use the `empty` variant to create empty states in your application without using JavaScript.

The empty variant in TailwindCSS allows you to style elements based on whether they are empty (i.e., they don’t have children). This is particularly useful for creating empty states in your application without relying on JavaScript. By using the empty variant, you can provide a better user experience by clearly indicating when a list or container has no content.

Todo List

<div>
    <ul class="peer">
    </ul>
    <div class="hidden items-center justify-center peer-empty:flex">
        <div class="text-center">
            <div class="font-medium text-title">No items found</div>
            <div class="text-sm text-gray-400 dark:text-gray-500">Try adding a new item to get started</div>
        </div>
    </div>
</div>

In this example:

The peer utility is applied to the <ul> element, which acts as the reference element.
The peer-empty:flex class is applied to the <div> element, which will be displayed as a flex container when the <ul> element is empty.
The hidden class ensures that the <div> element is hidden by default and only shown when the <ul> element is empty.

Conclusion

Using the empty variant in TailwindCSS allows you to create visually distinct empty states in your application without relying on JavaScript. This enhances the user experience by clearly indicating when a list or container has no content, making your application more intuitive and user-friendly.

On this page