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: Styling for Modern Web Development
course content

Зміст курсу

Tailwind CSS: Styling for Modern Web Development

Tailwind CSS: Styling for Modern 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