Зміст курсу
Tailwind CSS: Styling for Modern Web Development
Tailwind CSS: Styling for Modern Web Development
Basic 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.
index
index
index
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.
index
index
index
Explanation
max-w-sm
: Sets the maximum width of the element to small size (24rem or 384px);mx-auto
: Centers the element horizontally by applyingauto
margins on the left and right;p-4
: Adds padding of1rem
(16px) on all sides;bg-white
: Sets the background color to white;rounded-lg
: Applies large rounded corners to the element;shadow-md
: Applies a medium box shadow to the element.
text-2xl
: Sets the font size to2xl
(1.5rem or 24px);font-bold
: Applies bold font weight;text-gray-900
: Sets the text color to a very dark gray (near black);mb-2
: Adds a bottom margin of0.5rem
(8px);text-gray-700
: Sets the text color to a medium gray;mb-4
: Adds a bottom margin of1rem
(16px).
border
: Adds a border around the element;border-blue-500
: Sets the border color to a shade of blue;rounded-md
: Applies medium rounded corners to the element;p-4
: Adds padding of1rem
(16px) on all sides;bg-blue-50
: Sets the background color to a very light blue;text-blue-700
: Sets the text color to a dark blue.
mt-4
: Adds a top margin of1rem
(16px);p-4
: Adds padding of1rem
(16px) on all sides;bg-green-100
: Sets the background color to a very light green;border
: Adds a border around the element;border-green-500
: Sets the border color to a shade of green;rounded
: Applies small rounded corners to the element;shadow-sm
: Applies a small box shadow to the element;text-green-700
: Sets the text color to a dark green.
Дякуємо за ваш відгук!