Box shadow utilities in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Tailwind Box Shadow Classes

Which Tailwind CSS class applies a medium-sized shadow with a subtle blur and spread?

A shadow-md

B shadow-lg

C shadow-sm

D shadow-xl

💡 Hint

Think about the naming convention: sm is small, md is medium, lg is large.

The shadow-md class applies a medium shadow with moderate blur and spread. The shadow-sm is smaller, shadow-lg is larger, and shadow-xl is extra large.

📝 Syntax

intermediate

Correct Tailwind Shadow Class Usage

Which option correctly applies a large shadow to a button in Tailwind CSS?

Tailwind

<button class="???">Click me</button>

A shadow-large

B shadow-lg

C shadow-big

D shadow-large-md

💡 Hint

Tailwind uses short, consistent class names for shadows.

The correct class for a large shadow is shadow-lg. Other options are invalid and will not apply any shadow.

❓ rendering

advanced

Visual Result of Shadow Classes

What will you see if you apply shadow-xl to a card element?

A A very large, soft shadow around the card making it appear elevated

B No shadow visible on the card

C A small, sharp shadow only on the bottom edge

D A colored shadow with red tint around the card

💡 Hint

Extra large shadows create a strong elevation effect.

The shadow-xl class adds a large, soft shadow that makes the element look raised above the page.

❓ selector

advanced

Combining Tailwind Shadow Utilities

Which combination of Tailwind classes adds a medium shadow and a hover effect that increases the shadow size?

A shadow-sm hover:shadow-sm

B shadow-xl hover:shadow-md

C shadow-lg hover:shadow-md

D shadow-md hover:shadow-lg

💡 Hint

Hover effects usually increase the shadow size for emphasis.

shadow-md sets the base shadow, and hover:shadow-lg makes the shadow larger on hover, creating a nice interactive effect.

❓ accessibility

expert

Accessibility Considerations with Box Shadows

Which statement best explains how to use box shadows accessibly in Tailwind CSS designs?

A Avoid shadows completely because they always reduce readability

B Always use the largest shadow available to make elements stand out regardless of contrast

C Use shadows with sufficient contrast and avoid shadows that cause visual confusion for users with low vision

D Use colored shadows with bright colors to attract attention, ignoring contrast

💡 Hint

Accessibility means making sure everyone can see and understand the design clearly.

Good accessibility means using shadows that help separate elements without causing confusion or reducing readability, especially for users with vision challenges.