Ipapakita ng artikulong ito ang paraan ng paglalapat ng mga breakpoint at media query sa 'malinaw' na mga utility sa Tailwind.
Paano Gamitin ang Breakpoints at Media Query sa 'clear' sa Tailwind?
Para maglapat ng mga partikular na breakpoint at media query sa 'clear' na mga utility sa Tailwind, gumawa ng HTML structure. Pagkatapos, tukuyin ang nais na halaga sa ' malinaw-
Halimbawa
Sa halimbawang ito, gagamitin namin ang ' md 'breakpoint na may' malinaw-pareho 'utilidad at' lg 'breakpoint na may' malinaw-wala 'utilidad sa' ” elemento upang baguhin ang posisyon nito sa katamtaman at malaking laki ng screen:
< katawan >
< div klase = 'h-96 mx-10 p-8 bg-sky-500' >
< img src = 'tailwindcss_img.png' klase = 'float-left p-3 w-28 h-24' lahat = 'larawan' / >
< img src = 'tailwindcss_img.png' klase = 'float-right p-3' lahat = 'larawan' / >
< p klase = 'text-justify clear-left md:clear-pareho lg:clear-none' > Ang Tailwind CSS ay nagbibigay ng mga 'float' na mga utility upang kontrolin ang pagbabalot ng nilalaman sa paligid ng isang elemento.
Ipapakita ng halimbawang ito kung paano gumamit ng mga breakpoint at media query na may 'clear' na utility sa Tailwind. < / p >
< / div >
< / katawan >
dito:
- 'lumutang pakaliwa' pinalutang ng klase ang mga elemento sa kaliwang bahagi ng lalagyan.
- 'float-right' pinalutang ng klase ang mga elemento sa kanang bahagi ng lalagyan.
- “clear-left” inililipat ng klase ang
na elemento sa ibaba ng kaliwang lumulutang na elemento sa lalagyan.
- “md:malinaw-pareho” nililinis ng klase ang parehong kaliwa at kanang float at iposisyon ang
na elemento sa ibaba ng mga ito sa katamtamang laki ng screen.
- “lg:clear-none” hindi pinapagana ng klase ang anumang malinaw na inilapat sa
na elemento at pinapayagan ang elemento na lumutang sa magkabilang panig ng lalagyan sa malaking laki ng screen.
Output
Ayon sa output sa itaas, ang mga tinukoy na breakpoint at media query ay matagumpay na nailapat sa 'clear' na utility.
Konklusyon
Para sa paglalapat ng mga breakpoint at media query sa 'clear' na mga utility sa Tailwind, tukuyin ang nais na halaga sa ' malinaw-