В этой статье будет показан метод применения точек останова и медиа-запросов к «чистым» утилитам в Tailwind.
Как использовать точки останова и медиа-запросы при «очистке» в Tailwind?
Чтобы применить определенные точки останова и медиа-запросы к «чистым» утилитам в Tailwind, создайте структуру HTML. Затем определите желаемое значение для « ясно-<значение> ” для различных размеров экрана с помощью “ Мэриленд ' или ' LG ' контрольные точки. Наконец, измените размер экрана веб-страницы для проверки.
Пример
В этом примере мы будем использовать « Мэриленд ” точка останова с “ ясно-оба «полезность» и « LG ” точка останова с “ ясно-нет ” полезность в “ », чтобы изменить свое положение на среднем и большом экране:
< тело >
< див сорт '=' 'Ч-96 МХ-10 П-8 БГ-скай-500' >
< изображение источник '=' 'tailwindcss_img.png' сорт '=' 'поплавковый левый р-3, ш-28, ч-24' все '=' 'изображение' / >
< изображение источник '=' 'tailwindcss_img.png' сорт '=' 'Правый поплавок Р-3' все '=' 'изображение' / >
< п сорт '=' 'текст-выравнивание ясно-левый md: ясно-оба lg: ясно-нет' > Tailwind CSS предоставляет утилиты «поплавков» для управления обтеканием содержимого вокруг элемента.
В этом примере показано, как использовать точки останова и медиа-запросы с утилитой «clear» в Tailwind. < / п >
< / див >
< / тело >
Здесь:
- 'плыть налево' класс размещает элементы в левой части контейнера.
- «плавать вправо» класс размещает элементы в правой части контейнера.
- «четко слева» class перемещает элемент
ниже плавающего слева элемента в контейнере.
- «md: очистить-оба» класс очищает как левые, так и правые плавающие элементы и размещает элемент
под ними на среднем размере экрана.
- «lg: ясно-нет» Класс отключает любую очистку, применяемую к элементу
, и позволяет элементу плавать по обеим сторонам контейнера на большом экране.
Выход
Согласно приведенному выше выводу, указанные точки останова и медиа-запросы были успешно применены к утилите «clear».
Заключение
Для применения точек останова и медиа-запросов к «чистым» утилитам в Tailwind задайте желаемое значение для « ясно-<значение> ” для различных размеров экрана с помощью “ Мэриленд ' или ' LG ' контрольные точки. Для проверки измените размер экрана веб-страницы и убедитесь, что изменения внесены. В этой статье продемонстрирован пример применения определенных точек останова и медиа-запросов к «чистым» утилитам в Tailwind.