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

Зміст курсу

Tailwind CSS for Web Development

Tailwind CSS for Web Development

1. Introduction and Setup
2. Core Concepts and Basic Styling
3. Building Basic Components
4. Layout Basics
5. Responsiveness and Customization

bookBasic Styling - Shadows

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

css

index

js

index

copy

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

css

index

js

index

copy

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.
What class would you use to add a medium shadow to an element?

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

Виберіть правильну відповідь

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 2. Розділ 5
some-alt