В этом блоге подробно рассматриваются следующие основные концепции:
- Как использовать точки останова и медиа-запросы с фоновым клипом в Tailwind?
- Применение точек останова с фоновым клипом в Tailwind.
- Применение медиа-запросов с фоновым клипом в Tailwind.
Как использовать точки останова и медиа-запросы с фоновым клипом в Tailwind?
« bg-clip-{ключевое слово} Утилита используется для установки ограничивающей рамки фона элемента. Эту утилиту можно использовать с несколькими свойствами, например « прокладка ', ' рамка ', ' поле содержимого ', и ' текстовое окно ».
Пример 1. Применение точек останова с фоновым клипом в Tailwind
В этом примере точки останова применяются к фоновому клипу с помощью примененного « bg-clip-{ключевое слово} » утилита с « Мэриленд т. е. экраны среднего размера и « LG т. е. классы экранов большого размера:
< HTML >
< голова >
< мета кодировка '=' 'utf-8' >
< мета имя '=' 'окно просмотра' содержание '=' 'ширина=ширина устройства, начальный масштаб=1' >
< сценарий источник '=' 'https://cdn.tailwindcss.com' >< / сценарий >
< / голова >
< тело >
< текстовая область сорт '=' 'bg-clip-border p-6 bg-yellow-500 border-4 border-red-500 border-dashed md:bg-clip-text lg:bg-clip-padding' > Это CSS Tailwind < / текстовая область >
< / тело >
< / HTML >
Согласно этим строкам кода:
- Сначала укажите путь CDN, чтобы использовать функции Tailwind.
- Затем создайте элемент «