Bird
Raised Fist0
Tailwindmarkup~5 mins

Box shadow utilities in Tailwind

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Box shadows add depth and focus to elements on a webpage. They make things look like they are lifted off the page.

To highlight buttons when users hover over them.
To create card-like sections that stand out from the background.
To add subtle depth to images or containers.
To improve visual hierarchy by separating elements.
To give a soft glow effect around important content.
Syntax
Tailwind
shadow-{size}

Examples:
shadow-sm
shadow-md
shadow-lg
shadow-xl
shadow-2xl
shadow-inner
shadow-none

Use shadow-none to remove shadows.

Sizes go from small (shadow-sm) to very large (shadow-2xl).

Examples
This adds a small shadow around the box.
Tailwind
<div class="shadow-sm p-4">Small shadow</div>
This adds a bigger, more noticeable shadow.
Tailwind
<div class="shadow-lg p-4">Large shadow</div>
This adds a shadow inside the box edges.
Tailwind
<div class="shadow-inner p-4">Inner shadow</div>
This removes any shadow from the element.
Tailwind
<div class="shadow-none p-4">No shadow</div>
Sample Program

This page shows different Tailwind box shadow utilities on white boxes with some padding and rounded corners. The background is light gray to see the shadows clearly.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Tailwind Box Shadow Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex flex-col items-center gap-6 p-8 min-h-screen">
  <h1 class="text-2xl font-bold mb-4">Tailwind Box Shadow Utilities</h1>

  <div class="shadow-sm bg-white p-6 rounded">Small shadow</div>
  <div class="shadow-md bg-white p-6 rounded">Medium shadow</div>
  <div class="shadow-lg bg-white p-6 rounded">Large shadow</div>
  <div class="shadow-xl bg-white p-6 rounded">Extra large shadow</div>
  <div class="shadow-2xl bg-white p-6 rounded">2XL shadow</div>
  <div class="shadow-inner bg-white p-6 rounded">Inner shadow</div>
  <div class="shadow-none bg-white p-6 rounded">No shadow</div>
</body>
</html>
OutputSuccess
Important Notes

Box shadows help users see which parts of the page are clickable or important.

Use shadows sparingly to keep the design clean and not too busy.

Test shadows on different screen sizes to ensure they look good everywhere.

Summary

Box shadow utilities add depth by creating shadows around or inside elements.

Tailwind offers multiple sizes and an option for inner shadows.

Use shadow-none to remove shadows when needed.

Practice

(1/5)
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