Tailwind CSS Alerts
Show contextual feedback with Tailwind CSS alerts, including solid, soft, bordered, dismissible, and action-ready variants.
Alerts highlight important messages such as notifications, warnings, status updates, and confirmations.
They can include descriptions, lists, links, actions, and dismiss buttons so key information stays visible without interrupting the rest of the interface.
Solid color variants
Use solid background colors for higher-emphasis success, warning, error, and info messages.
Soft color variants
Use softer background tints when you want alerts to feel lighter and less intrusive.
Bordered styles
Add borders to create lighter alert styles with stronger structure and definition.
With supporting text
Add a title, supporting copy, and an icon when the alert needs more context.
With list
Use lists to group multiple details, reminders, or next steps in a single alert.
Right-aligned link
Align a follow-up link to the right for a lightweight secondary action.
Discovery
Use a discovery alert to announce product updates, feature launches, or onboarding tips.
Dismissible alert
Requires JS
This page requires our Remove Element plugin. You can skip this step if you're already using Preline UI as a package.
Use dismiss-alert to let users remove the alert from the page.