Tailwind CSS cookbook · Beginner
Show a toast notification
Display a small success or error message in a corner of the screen that doesn't block the page.
Approach
Fix the toast to a corner with fixed bottom-4 right-4, give it a status colour and an icon, and announce it to
screen readers with role="status" (or role="alert" for errors).
Solution
<div class="relative h-40 bg-slate-100">
<div role="status" class="absolute right-4 bottom-4 flex w-72 items-start gap-3 rounded-xl bg-white p-4 shadow-lg ring-1 ring-slate-200 motion-safe:animate-bounce">
<span class="grid size-6 shrink-0 place-items-center rounded-full bg-emerald-100 text-sm text-emerald-700">✓</span>
<div class="min-w-0 flex-1">
<p class="text-sm font-semibold">Saved</p>
<p class="truncate text-sm text-slate-600">Your changes to "Quarterly report" were saved.</p>
</div>
<button class="text-slate-400 hover:text-slate-600"><span class="sr-only">Dismiss</span>✕</button>
</div>
</div>
Pitfalls
- Toasts that disappear too fast to read; keep important messages until dismissed.
- Endless animations; limit to the entrance and respect
motion-safe:.
Variations
- Stack several with a
fixedcontainer usingflex flex-col gap-2. - Libraries such as Sonner (React) handle queues and timing.
Further reading: Tailwind CSS docs
Reference: https://tailwindcss.com/docs/position