W tym artykule zilustrujemy metodę stosowania punktów przerwania i zapytań o media w „czystych” narzędziach w Tailwind.
Jak wykorzystać punkty przerwania i zapytania medialne na „czystym” w Tailwind?
Aby zastosować określone punkty przerwania i zapytania o media w „czystych” narzędziach w Tailwind, utwórz strukturę HTML. Następnie zdefiniuj żądaną wartość jako „ wyczyść-
Przykład
W tym przykładzie użyjemy „ md ” punkt przerwania z „ oba czyste ” użyteczność i „ lg ” punkt przerwania z „ jasne-brak ” użyteczność w „ ”, aby zmienić jego położenie na średnim i dużym ekranie:
< ciało >
< dz klasa = 'h-96 mx-10 p-8 bg-sky-500' >
< img źródło = 'tailwindcss_img.png' klasa = „zmiennoprzecinkowy w lewo p-3 w-28 h-24” wszystko = 'obraz' / >
< img źródło = 'tailwindcss_img.png' klasa = „Pływający w prawo p-3” wszystko = 'obraz' / >
< P klasa = „tekst-wyjustuj wyczyść-lewo md: wyczyść-oba lg: wyczyść-brak” > Tailwind CSS zapewnia narzędzia „unoszące się” do kontrolowania zawijania treści wokół elementu.
Ten przykład pokaże, jak używać punktów przerwania i zapytań o media za pomocą narzędzia „clear” w Tailwind. < / P >
< / dz >
< / ciało >
Tutaj:
- „przepływ w lewo” class przenosi elementy na lewą stronę kontenera.
- „płynie w prawo” class przenosi elementy na prawą stronę kontenera.
- „wyraźnie w lewo” class przesuwa element
poniżej lewego elementu pływającego w kontenerze.
- „md: wyczyść oba” class czyści zarówno lewy, jak i prawy pływak i umieszcza element
pod nimi na średnim rozmiarze ekranu.
- „lg: wyczyść-brak” class wyłącza wszelkie czyszczenie zastosowane do elementu
i pozwala elementowi unosić się po obu stronach kontenera na dużym ekranie.
Wyjście
Zgodnie z powyższym wynikiem określone punkty przerwania i zapytania o media zostały pomyślnie zastosowane w narzędziu „wyczyść”.
Wniosek
Aby zastosować punkty przerwania i zapytania o media w „czystych” narzędziach w Tailwind, zdefiniuj żądaną wartość jako „ wyczyść-