Додавання Тіней для Глибини та Контрасту

Tailwind CSS пропонує набір утиліт для додавання тіней до елементів.

Тіні для блоків

Використовуйте префікс shadow- разом із значенням розміру для додавання тіней до блоків.

Тінь для тексту

Tailwind CSS за замовчуванням не містить утиліт text-shadow. Проте, за потреби ви можете легко додати власні утиліти text-shadow у файл конфігурації Tailwind.

Примітка

Якщо потрібно ознайомитися з конкретними тінями Tailwind, зверніться до документації: Box Shadow.

Приклад

Практичний приклад застосування базового стилювання (кольори, межі, тіні) за допомогою вивчених утиліт.

Пояснення

1. max-w-sm: Встановлює максимальну ширину елемента на малий розмір (24rem або 384px);
2. mx-auto: Центрує елемент по горизонталі шляхом застосування auto відступів зліва та справа;
3. p-4: Додає внутрішній відступ 1rem (16px) з усіх сторін;
4. bg-white: Встановлює білий колір фону;
5. rounded-lg: Застосовує великі заокруглені кути до елемента;
6. shadow-md: Додає середню тінь до елемента.

1. text-2xl: Встановлює розмір шрифту на 2xl (1.5rem або 24px);
2. font-bold: Застосовує жирну товщину шрифту;
3. text-gray-900: Встановлює колір тексту дуже темно-сірий (майже чорний);
4. mb-2: Додає нижній відступ 0.5rem (8px);
5. text-gray-700: Встановлює колір тексту середньо-сірий;
6. mb-4: Додає нижній відступ 1rem (16px).

1. border: Додає рамку навколо елемента;
2. border-blue-500: Встановлює колір рамки синім відтінком;
3. rounded-md: Застосовує середнє заокруглення кутів до елемента;
4. p-4: Додає внутрішній відступ 1rem (16px) з усіх сторін;
5. bg-blue-50: Встановлює дуже світлий синій фон;
6. text-blue-700: Встановлює колір тексту темно-синій.

1. mt-4: Додає верхній відступ 1rem (16px);
2. p-4: Додає внутрішній відступ 1rem (16px) з усіх сторін;
3. bg-green-100: Встановлює дуже світлий зелений фон;
4. border: Додає рамку навколо елемента;
5. border-green-500: Встановлює колір рамки зеленим відтінком;
6. rounded: Застосовує невелике заокруглення кутів до елемента;
7. shadow-sm: Додає невелике тінювання до елемента;
8. text-green-700: Встановлює колір тексту темно-зелений.