Box shadow utilities in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the <code>shadow</code> utility class in Tailwind CSS do?

It adds a small default box shadow around an element, giving it a subtle lifted look.

beginner

How do you apply a large shadow using Tailwind CSS?

Use the <code>shadow-lg</code> class to add a large box shadow to an element.

intermediate

What is the difference between shadow-md and shadow-xl in Tailwind?

shadow-md applies a medium shadow, while shadow-xl applies an extra large, more noticeable shadow.

beginner

How can you remove a box shadow from an element in Tailwind CSS?

Use the <code>shadow-none</code> class to remove any box shadow from an element.

intermediate

Why is using Tailwind's box shadow utilities better than writing custom CSS shadows?

Tailwind's utilities are consistent, easy to use, and responsive-friendly. They save time and keep your design uniform.

Which Tailwind class adds a small default shadow to an element?

A shadow-xl

B shadow

C shadow-none

D shadow-lg

The shadow class adds a small default shadow.

How do you remove a shadow from an element using Tailwind?

A shadow-0

B shadow-remove

C no-shadow

D shadow-none

The shadow-none class removes any box shadow.

Which class applies the largest shadow in Tailwind's default set?

A shadow-xl

B shadow-md

C shadow-lg

D shadow-sm

shadow-xl applies the largest default shadow.

What is the main benefit of using Tailwind's box shadow utilities?

A They require writing custom CSS

B They are inconsistent across projects

C They provide quick, consistent shadows without custom CSS

D They only work on buttons

Tailwind utilities provide quick and consistent shadows without needing custom CSS.

Which class adds a medium shadow in Tailwind?

A shadow-md

B shadow-sm

C shadow-none

D shadow-xl

shadow-md adds a medium sized shadow.

Explain how to use Tailwind CSS box shadow utilities to add and remove shadows on elements.

Think about the class names and how they describe shadow size.

Describe why using Tailwind's box shadow utilities can help keep your web design consistent and easier to maintain.

Consider benefits of utility classes over custom styles.