Додавання Тіней для Глибини та Контрасту
Tailwind CSS пропонує набір утиліт для додавання тіней до елементів.
Тіні для блоків
Використовуйте префікс shadow- разом із значенням розміру для додавання тіней до блоків.
index.html
Тінь для тексту
Tailwind CSS за замовчуванням не містить утиліт text-shadow. Проте, за потреби ви можете легко додати власні утиліти text-shadow у файл конфігурації Tailwind.
Примітка
Якщо потрібно ознайомитися з конкретними тінями Tailwind, зверніться до документації: Box Shadow.
Приклад
Практичний приклад застосування базового стилювання (кольори, межі, тіні) за допомогою вивчених утиліт.
index.html
Пояснення
max-w-sm: Встановлює максимальну ширину елемента на малий розмір (24rem або 384px);mx-auto: Центрує елемент по горизонталі шляхом застосуванняautoвідступів зліва та справа;p-4: Додає внутрішній відступ1rem(16px) з усіх сторін;bg-white: Встановлює білий колір фону;rounded-lg: Застосовує великі заокруглені кути до елемента;shadow-md: Додає середню тінь до елемента.
text-2xl: Встановлює розмір шрифту на2xl(1.5rem або 24px);font-bold: Застосовує жирну товщину шрифту;text-gray-900: Встановлює колір тексту дуже темно-сірий (майже чорний);mb-2: Додає нижній відступ0.5rem(8px);text-gray-700: Встановлює колір тексту середньо-сірий;mb-4: Додає нижній відступ1rem(16px).
border: Додає рамку навколо елемента;border-blue-500: Встановлює колір рамки синім відтінком;rounded-md: Застосовує середнє заокруглення кутів до елемента;p-4: Додає внутрішній відступ1rem(16px) з усіх сторін;bg-blue-50: Встановлює дуже світлий синій фон;text-blue-700: Встановлює колір тексту темно-синій.
mt-4: Додає верхній відступ1rem(16px);p-4: Додає внутрішній відступ1rem(16px) з усіх сторін;bg-green-100: Встановлює дуже світлий зелений фон;border: Додає рамку навколо елемента;border-green-500: Встановлює колір рамки зеленим відтінком;rounded: Застосовує невелике заокруглення кутів до елемента;shadow-sm: Додає невелике тінювання до елемента;text-green-700: Встановлює колір тексту темно-зелений.
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Awesome!
Completion rate improved to 3.57Додавання Тіней для Глибини та Контрасту
Свайпніть щоб показати меню
Tailwind CSS пропонує набір утиліт для додавання тіней до елементів.
Тіні для блоків
Використовуйте префікс shadow- разом із значенням розміру для додавання тіней до блоків.
index.html
Тінь для тексту
Tailwind CSS за замовчуванням не містить утиліт text-shadow. Проте, за потреби ви можете легко додати власні утиліти text-shadow у файл конфігурації Tailwind.
Примітка
Якщо потрібно ознайомитися з конкретними тінями Tailwind, зверніться до документації: Box Shadow.
Приклад
Практичний приклад застосування базового стилювання (кольори, межі, тіні) за допомогою вивчених утиліт.
index.html
Пояснення
max-w-sm: Встановлює максимальну ширину елемента на малий розмір (24rem або 384px);mx-auto: Центрує елемент по горизонталі шляхом застосуванняautoвідступів зліва та справа;p-4: Додає внутрішній відступ1rem(16px) з усіх сторін;bg-white: Встановлює білий колір фону;rounded-lg: Застосовує великі заокруглені кути до елемента;shadow-md: Додає середню тінь до елемента.
text-2xl: Встановлює розмір шрифту на2xl(1.5rem або 24px);font-bold: Застосовує жирну товщину шрифту;text-gray-900: Встановлює колір тексту дуже темно-сірий (майже чорний);mb-2: Додає нижній відступ0.5rem(8px);text-gray-700: Встановлює колір тексту середньо-сірий;mb-4: Додає нижній відступ1rem(16px).
border: Додає рамку навколо елемента;border-blue-500: Встановлює колір рамки синім відтінком;rounded-md: Застосовує середнє заокруглення кутів до елемента;p-4: Додає внутрішній відступ1rem(16px) з усіх сторін;bg-blue-50: Встановлює дуже світлий синій фон;text-blue-700: Встановлює колір тексту темно-синій.
mt-4: Додає верхній відступ1rem(16px);p-4: Додає внутрішній відступ1rem(16px) з усіх сторін;bg-green-100: Встановлює дуже світлий зелений фон;border: Додає рамку навколо елемента;border-green-500: Встановлює колір рамки зеленим відтінком;rounded: Застосовує невелике заокруглення кутів до елемента;shadow-sm: Додає невелике тінювання до елемента;text-green-700: Встановлює колір тексту темно-зелений.
Дякуємо за ваш відгук!
