20 Tailwind CSS Empty States

Demo 01 renders each active filter as a removable chip — a pill with a label and an icon <button> carrying an aria-label such as Remove status: open. The empty message is driven by the fact that nothing matched, not by the chips, so the copy stays honest: it names the scope that was searched and offers a one-click Clear all filters reset. The detail developers skip is that the reset must actually clear state, not just hide the message — in a real app wire the Clear button to reset your query params or state, then re-run the fetch. Keep the chips inside a real <ul> so each is a list item, mark the result region with role=status so the count change is announced, and give every remove button a visible focus-visible ring so a keyboard user can delete filters one at a time.

Yes — Demo 06 (the filter no-matches pipeline) and Demo 10 (the notification flyout) both run on native form controls instead of a click handler. A hidden <input> checkbox or radio holds the state, a <label> is the clickable trigger, and the panel reacts with the peer-checked or has-[:checked] variant. For the filter case, checking a sidebar box narrows the list and reveals the empty copy entirely through CSS. The trap is specificity and source order: a peer-checked rule only wins if the peer is a previous sibling in the DOM, so the input has to come before the element it styles. Also remember pure-CSS state does not survive a reload and is not readable by your app logic, so use it for self-contained demos and disclosure UI — not for state your backend or router needs to know about.

Demo 05 keeps a real <table> the whole time rather than swapping in a <div> when rows run out. The empty message lives in a single <td> that spans the full width with colspan set to the number of header columns — otherwise the cell collapses under column one and the layout looks broken. Keep the <thead> rendered so the user still sees what the columns would hold, and put the message row inside <tbody>. The common mistake is conditionally hiding the table and rendering a separate empty block, which throws away the header context and causes a layout jump when data arrives. For assistive tech, the message cell reads as a normal table cell; if you want it announced on refresh, wrap the message text in an element with role=status so a fetch that returns zero rows is spoken, not silent.

Demo 17 is built to be heard. The core piece is an aria-live region wrapping the results area, set to polite, so when a search resolves to nothing the message No records match your query is announced without stealing focus. Three rules matter. First, the live region must already be in the DOM before the text changes — if you insert the whole region at the same moment, many readers miss it. Second, keep the announcement short and specific; do not read the entire illustration. Third, don't trap focus on the empty card — a focus-revealed skip link lets keyboard users jump straight to the search input to try again. Decorative SVG art gets aria-hidden=true so it is skipped entirely, and the heading stays a real <h2> so the empty state appears in the document outline rather than being an orphaned block of text.

This is the moment Demo 16 targets, and the bug it fixes is the one most products ship: the skeleton shimmer finishes and resolves into nothing, leaving a user staring at a blank panel wondering if it is still loading. The sequence is explicit — shimmer rows fade out, and the empty message fades in only after, so the two never overlap and the switch reads as deliberate. Drive it off your actual request lifecycle: show the skeleton while the promise is pending, then branch on the resolved result, not on a timer, so a slow network never flips to empty before the data lands. Guard the shimmer animation with motion-reduce so it stops for users who ask for reduced motion. Keep the skeleton's row count and spacing close to the real content's so there is no layout jump when either the data or the empty card takes its place.

Demo 19 pairs every surface color with its counterpart using Tailwind's dark: variant — for example bg-white with dark:bg-slate-900, and muted text as text-slate-500 with dark:text-slate-400. The piece developers forget is the illustration: a decorative icon or ghost shape that looks right on white often disappears on a dark panel, so its stroke and fill need dark: overrides too, not just the card background. Demo 19 also ships a three-way System / Light / Dark switch, which means your toggle has to cover the System case — that is driven by the OS prefers-color-scheme media query, while the explicit choices set a class on the root. Decide up front whether dark: keys off the media query or a class and configure Tailwind's dark mode to match, or the manual toggle and the system default will fight each other.

Demo 20 exists for exactly this decision: not every empty state deserves a hero. It shows one small component dropped into four homes — a sidebar list, a widget, a table cell, a summary tile — where a centered illustration and a big headline would be absurdly out of scale. Use the micro form when the empty region is one part of a populated screen and the rest of the page is doing fine; a single muted line like No alerts yet plus maybe one small action is enough. Reserve the full illustrated hero (Demos 03, 18) for when the empty region is the whole screen — an empty cart or an untouched cookbook. Getting this wrong in either direction hurts: a hero inside a sidebar looks broken, and a one-liner on a blank full page reads as an error. Match the weight of the empty state to the size of the space it fills.

They look similar but mean opposite things, and this collection separates them. An empty state (Demos 03, 15) says nothing is here yet, and that's fine — it guides the user forward with a next action. An error state (Demos 08, 11, 12) says something failed — it needs a cause and a recovery path, not encouragement. Demo 11 keeps one panel's failure isolated so its neighbours stay live, and its retry must actually re-run the request, not just clear the message. Demo 08 (a 500) offers a retry that replays the action plus a copyable error reference. Demo 12 (offline) reassures that local edits are safe and retries when the connection returns. The common bug is showing a cheerful empty illustration for a failed fetch — users read that as no data exists and stop trying. Branch on your request result: zero rows is empty, a rejected promise is an error, and each gets its own copy.