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.

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.

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.