Box shadow utilities in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a small shadow to the box using Tailwind CSS.

Tailwind

<div class="shadow[1] p-4 bg-white rounded">Shadow Box</div>

Drag options to blanks, or click blank then click option'

A-xl

B-lg

C-sm

D-2xl

Attempts:

3 left

💡 Hint

Common Mistakes

Using shadow-lg or bigger classes for a small shadow.

Forgetting the dash before size like shadowsm.

The shadow-sm class adds a small shadow to the element.

2fill in blank

medium

Complete the code to add a large shadow to the box using Tailwind CSS.

Tailwind

<div class="shadow[1] p-6 bg-gray-100 rounded">Large Shadow Box</div>

Drag options to blanks, or click blank then click option'

A-xl

B-md

C-sm

D-lg

Attempts:

3 left

💡 Hint

Common Mistakes

Using shadow-sm which is too small.

Using shadow-xl which is extra large.

The shadow-lg class adds a large shadow to the element.

3fill in blank

hard

Fix the error in the code to apply a medium shadow using Tailwind CSS.

Tailwind

<div class="shadow[1] p-5 bg-blue-50 rounded">Medium Shadow Box</div>

Drag options to blanks, or click blank then click option'

Amd

B-md

Cmedium

D-medium

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the dash before the size.

Using full words like medium which Tailwind does not support.

The correct class is shadow-md with a dash before md.

4fill in blank

hard

Fill both blanks to create a box with an extra large shadow and padding of 8.

Tailwind

<div class="shadow[1] p-[2] bg-green-50 rounded">Extra Large Shadow Box</div>

Drag options to blanks, or click blank then click option'

A-xl

B-lg

C8

D6

Attempts:

3 left

💡 Hint

Common Mistakes

Using shadow-lg instead of shadow-xl.

Using wrong padding number like p-6.

shadow-xl adds an extra large shadow and p-8 adds padding of 2rem.

5fill in blank

hard

Fill all three blanks to create a box with a double extra large shadow, padding 10, and rounded corners.

Tailwind

<div class="shadow[1] p-[2] rounded[3] bg-yellow-50">Double XL Shadow Box</div>

Drag options to blanks, or click blank then click option'

A-2xl

B10

C-lg

D-md

Attempts:

3 left

💡 Hint

Common Mistakes

Using shadow-xl instead of shadow-2xl.

Forgetting the dash in rounded-lg.

Using wrong padding like p-8.

shadow-2xl adds a very large shadow, p-10 adds padding of 2.5rem, and rounded-lg adds medium rounded corners.

Practice

1. What does the Tailwind class shadow-lg do to an element?

easy

A. Adds a small inner shadow inside the element

B. Removes any shadow from the element

C. Adds a large shadow around the element to create depth

D. Changes the element's background color to gray

Solution

1. Step 1: Understand the purpose of shadow-lg

   The shadow-lg class in Tailwind adds a large box shadow around an element, making it appear elevated.

2. Step 2: Compare with other shadow classes

   Unlike shadow-none which removes shadows, or shadow-inner which adds inner shadows, shadow-lg adds a bigger outer shadow.

3. Final Answer:

   Adds a large shadow around the element to create depth -> Option C

4. Quick Check:

   shadow-lg means large shadow [OK]

Hint: Remember: 'lg' means large shadow outside [OK]

Common Mistakes:

• Confusing shadow-lg with shadow-inner
• Thinking it removes shadows instead of adding
• Assuming it changes background color

2. Which Tailwind class correctly removes any box shadow from an element?

easy

A. shadow-none

B. shadow-remove

C. no-shadow

D. shadow-clear

Solution

1. Step 1: Recall Tailwind class for removing shadows

   Tailwind uses shadow-none to remove all box shadows from an element.

2. Step 2: Verify other options

   Classes like shadow-remove, no-shadow, and shadow-clear do not exist in Tailwind's box shadow utilities.

3. Final Answer:

   shadow-none -> Option A

4. Quick Check:

   shadow-none removes shadows [OK]

Hint: Use shadow-none to clear shadows [OK]

Common Mistakes:

• Using non-existent classes like shadow-remove
• Confusing with background or border classes
• Assuming no-shadow is valid

3. What visual effect will the following Tailwind classes produce?

<div class="shadow-inner shadow-md p-4">Content</div>

medium

A. A medium-sized outer shadow with padding around the content

B. A medium-sized inner shadow inside the element with padding

C. No shadow visible because inner and outer shadows cancel out

D. A large outer shadow with no padding

Solution

1. Step 1: Analyze the classes shadow-inner and shadow-md

   shadow-inner adds an inner shadow inside the element. shadow-md adds a medium outer shadow. Since shadow-md comes after shadow-inner in the class attribute, Tailwind applies it later and it overrides the box-shadow property, resulting in a medium outer shadow.

2. Step 2: Consider padding and shadow layering

   The p-4 adds padding inside the element around the content.

3. Final Answer:

   A medium-sized outer shadow with padding around the content -> Option A

4. Quick Check:

   shadow-md overrides as last shadow class [OK]

Hint: Last shadow class in class attribute wins [OK]

Common Mistakes:

• Assuming both inner and outer shadows show simultaneously
• Ignoring padding effect on shadow placement
• Thinking shadows cancel each other out

4. You want to add a small shadow around a button but accidentally use shadow-inner instead of shadow-sm. What is the main visual difference?

medium

A. The button will have a small outer shadow as intended

B. The button will have a shadow inside its edges, not outside

C. No shadow will appear on the button

D. The button's shadow will be very large and blurry

Solution

1. Step 1: Understand shadow-inner vs shadow-sm

   shadow-inner adds a shadow inside the element edges, creating an inset effect. shadow-sm adds a small outer shadow around the element.

2. Step 2: Identify the visual impact of using shadow-inner

   Using shadow-inner instead of shadow-sm means the shadow appears inside the button edges, not outside, changing the intended look.

3. Final Answer:

   The button will have a shadow inside its edges, not outside -> Option B

4. Quick Check:

   shadow-inner = inside shadow, not outside [OK]

Hint: shadow-inner means inside shadow, not outside [OK]

Common Mistakes:

• Thinking shadow-inner adds outer shadow
• Expecting no shadow to appear
• Confusing shadow sizes with shadow placement

5. You want a card with a subtle shadow that disappears on small screens but appears on medium and larger screens. Which Tailwind classes achieve this?

hard

A. shadow-sm md:shadow-none

B. shadow-md sm:shadow-none

C. shadow-inner md:shadow-lg

D. shadow-none md:shadow-sm

Solution

1. Step 1: Understand responsive prefixes in Tailwind

   Classes prefixed with md: apply at medium screen sizes and above. Without prefix, classes apply to all screen sizes.

2. Step 2: Identify the correct class combination

   shadow-none md:shadow-sm means no shadow on small screens, and a small shadow starting at medium screens. This matches the requirement.

3. Step 3: Check other options

   shadow-sm md:shadow-none reverses the logic, showing shadow on small screens and none on medium. shadow-md sm:shadow-none uses sm: which applies at small screens, not medium. shadow-inner md:shadow-lg uses shadow-inner and large shadow which is not subtle.

4. Final Answer:

   shadow-none md:shadow-sm -> Option D

5. Quick Check:

   Use shadow-none then md:shadow-sm for responsive shadows [OK]

Hint: Use shadow-none then md:shadow-sm for responsive shadows [OK]

Common Mistakes:

• Mixing up responsive prefixes like sm: and md:
• Applying shadow classes in wrong order
• Using inner shadows instead of outer for subtle effect