Drop shadow on irregular shapes in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

Which Tailwind class adds a drop shadow to an irregular shape?

You have an irregular shape created with an SVG inside a div. Which Tailwind CSS class will add a visible drop shadow around the shape?

Tailwind

<div class="w-40 h-40">
  <svg viewBox="0 0 100 100" class="w-full h-full">
    <path d="M10 30 Q 50 5 90 30 T 90 80 Q 50 95 10 80 Z" fill="#4ade80" />
  </svg>
</div>

A shadow-lg

B border-4

C bg-gray-200

D ring-4 ring-gray-500

💡 Hint

Drop shadows in Tailwind use the shadow-* classes.

The shadow-lg class applies a large drop shadow around the element, including irregular shapes like SVG paths. Border and ring add outlines, not shadows.

🧠 Conceptual

intermediate

Why might a drop shadow not appear on an irregular SVG shape with Tailwind's shadow class?

You applied the shadow-lg class to a div containing an SVG irregular shape, but no shadow is visible. What is the most likely reason?

A The shadow-lg class requires a background color to show the shadow.

B Tailwind shadows only work on text elements, not SVGs.

C The SVG shape has transparent background and the shadow applies only to the div's rectangular box.

D The SVG path must have a stroke color for shadows to appear.

💡 Hint

Think about how shadows apply to the container box, not the shape inside.

Drop shadows apply to the element's bounding box, which is rectangular. If the SVG shape is transparent inside the div, the shadow appears around the rectangle, not the shape edges.

📝 Syntax

advanced

Which Tailwind utility correctly applies a custom drop shadow with offset and blur?

You want a drop shadow with 4px horizontal offset, 6px vertical offset, 10px blur, and black color at 50% opacity. Which Tailwind class syntax is correct?

A shadow-[rgba(0,0,0,0.5)_4px_6px_10px]

B shadow-[4px_6px_10px_rgba(0,0,0,0.5)]

C drop-shadow-[4px_6px_10px_rgba(0,0,0,0.5)]

D shadow-custom(4px,6px,10px,rgba(0,0,0,0.5))

💡 Hint

Tailwind supports arbitrary values inside square brackets with underscores for spaces.

Tailwind allows custom shadows using shadow-[offsetX_offsetY_blur_color]. Underscores replace spaces. drop-shadow is for filter shadows, not box shadows.

❓ selector

advanced

Which CSS selector targets only irregular SVG shapes inside a div with Tailwind?

You want to apply a drop shadow only to SVG elements inside a div with class 'shape-container'. Which selector is correct?

A svg.path.shape-container

B .shape-container > svg > path

C div.shape-container path:first-child

D .shape-container path

💡 Hint

Think about selecting all path elements inside the container, no matter how nested.

The selector '.shape-container path' selects all path elements inside any descendant of the container. '> svg > path' is too strict and misses nested paths.

❓ accessibility

expert

How to ensure drop shadow on irregular shapes does not reduce accessibility?

You added a drop shadow to an irregular SVG shape for decoration. What is the best practice to keep your site accessible?

A Use aria-hidden="true" on the SVG and provide descriptive text elsewhere.

B Add a bright colored shadow to improve contrast for all users.

C Remove the shadow on focus to avoid distraction.

D Use drop shadow only on clickable elements with aria-label.

💡 Hint

Decorative elements should not confuse screen readers.

Marking decorative SVGs with aria-hidden="true" hides them from screen readers, preventing confusion. Descriptions should be provided in accessible text.