Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Oppiskele Adding Shadows for Depth and Contrast | Core Concepts and Basic Styling
Tailwind CSS for Web Development

book
Adding Shadows for Depth and Contrast

Tailwind CSS offers a range of utilities for adding shadows to elements.

Box Shadows

Use the shadow- prefix followed by the size value to add box shadows.

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Basic Styling - Shadows - Example 1</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="shadow-sm p-4">Small Shadow</div>
<div class="shadow-md p-4">Medium Shadow</div>
<div class="shadow-lg p-4">Large Shadow</div>
<div class="shadow-xl p-4">Extra Large Shadow</div>
<div class="shadow-2xl p-4">2XL Shadow</div>
</body>
</html>

Text Shadows

Tailwind CSS doesn’t include text-shadow utilities by default. However, you can easily add custom text-shadow utilities in your Tailwind configuration file if needed.

Note

If you need to dive into specific Tailwind shadows, please refer to the documentation: Box Shadow.

Example

Here is a practical example of applying basic styling (colors, borders, shadows) using the utilities we have learned.

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Basic Styling - Shadows - Example 2</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="max-w-sm mx-auto p-4 bg-white rounded-lg shadow-md">
<h2 class="text-2xl font-bold text-gray-900 mb-2">Example Card</h2>
<p class="text-gray-700 mb-4">
This is a simple card with various Tailwind CSS utilities applied for
styling.
</p>
<div class="border border-blue-500 rounded-md p-4 bg-blue-50">
<p class="text-blue-700">
This is a bordered box with a background color and text color applied.
</p>
</div>
<div
class="mt-4 p-4 bg-green-100 border border-green-500 rounded shadow-sm"
>
<p class="text-green-700">
Another box with a different set of utilities.
</p>
</div>
</div>
</body>
</html>

Explanation

  1. max-w-sm: Sets the maximum width of the element to small size (24rem or 384px);

  2. mx-auto: Centers the element horizontally by applying auto margins on the left and right;

  3. p-4: Adds padding of 1rem (16px) on all sides;

  4. bg-white: Sets the background color to white;

  5. rounded-lg: Applies large rounded corners to the element;

  6. shadow-md: Applies a medium box shadow to the element.

  1. text-2xl: Sets the font size to 2xl (1.5rem or 24px);

  2. font-bold: Applies bold font weight;

  3. text-gray-900: Sets the text color to a very dark gray (near black);

  4. mb-2: Adds a bottom margin of 0.5rem (8px);

  5. text-gray-700: Sets the text color to a medium gray;

  6. mb-4: Adds a bottom margin of 1rem (16px).

  1. border: Adds a border around the element;

  2. border-blue-500: Sets the border color to a shade of blue;

  3. rounded-md: Applies medium rounded corners to the element;

  4. p-4: Adds padding of 1rem (16px) on all sides;

  5. bg-blue-50: Sets the background color to a very light blue;

  6. text-blue-700: Sets the text color to a dark blue.

  1. mt-4: Adds a top margin of 1rem (16px);

  2. p-4: Adds padding of 1rem (16px) on all sides;

  3. bg-green-100: Sets the background color to a very light green;

  4. border: Adds a border around the element;

  5. border-green-500: Sets the border color to a shade of green;

  6. rounded: Applies small rounded corners to the element;

  7. shadow-sm: Applies a small box shadow to the element;

  8. text-green-700: Sets the text color to a dark green.

question mark

What class would you use to add a medium shadow to an element?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 2. Luku 5

Kysy tekoälyä

expand
ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

We use cookies to make your experience better!
some-alt