Alert and notification patterns in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the main purpose of an alert or notification in web design?

Alerts and notifications inform users about important information, errors, or updates that need their attention.

beginner

Which Tailwind CSS utility class would you use to give an alert a red background for an error message?

Use bg-red-500 or a similar red shade like bg-red-600 to indicate an error alert background.

intermediate

Why should alerts be accessible and what ARIA role is commonly used?

Alerts should be accessible so screen readers can announce them immediately. The ARIA role alert is used for this purpose.

intermediate

How can you make a notification dismissible using Tailwind CSS and basic HTML?

Add a close button inside the alert with a clear label (like aria-label="Close alert") and use JavaScript to remove the alert from the DOM when clicked.

beginner

What Tailwind CSS classes help make alerts responsive and visually clear on different screen sizes?

Use padding classes like p-4, margin classes like mb-4, and text classes like text-sm md:text-base to ensure alerts look good on all devices.

Which ARIA role should you add to an alert to make it accessible?

A role="alert"

B role="button"

C role="navigation"

D role="banner"

The role="alert" tells screen readers to announce the alert immediately.

Which Tailwind class is best for a success alert background?

A bg-blue-500

B bg-yellow-500

C bg-green-500

D bg-red-500

Green shades like bg-green-500 are commonly used for success messages.

What is a good practice for making alerts dismissible?

A Use only background color changes

B Make alert text bold only

C Hide alert with CSS only

D Add a close button with an aria-label and remove alert on click

A close button with an accessible label and JavaScript to remove the alert is best.

Which Tailwind utility helps add spacing inside an alert box?

A m-4

B p-4

C text-center

D border-4

p-4 adds padding inside the alert for spacing.

Why should alerts use semantic HTML elements like section or div with roles?

A To improve accessibility and structure

B To make alerts colorful

C To increase font size

D To add animations

Semantic elements and ARIA roles help assistive technologies understand the alert.

Explain how to create an accessible, dismissible alert using Tailwind CSS.

Think about accessibility, styling, and user interaction.

Describe the color choices and spacing utilities in Tailwind CSS for different alert types.

Consider how colors communicate meaning and spacing improves readability.