1. Components
  2. Alerts


Tailwind CSS Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Color variants

Solid color variants

The default form of solid color avatars.

Soft color variants

The default form of soft color avatars.

With description

Alerts can also contain additional HTML elements like headings, paragraphs and icons.

With list

Similarly you can use lists.


More actionable alert example.

Use utility classes to quickly provide matching colored links within any alert.

Requires JS

Dismiss button

Example of a dismissible button. Requires JavaScript.

Use dismiss-alert to dismiss a content.

Check out the full documentation on Remove element.


Use a discovery message to signify an update to the UI or provide information around new features and onboarding.