Tämä artikkeli on esimerkki tapa käyttää keskeytyskohtia ja mediakyselyjä Tailwindin 'selkeissä' apuohjelmissa.
Kuinka hyödyntää keskeytyspisteitä ja mediakyselyitä 'clear' -tilassa Tailwindissä?
Jos haluat käyttää tiettyjä keskeytyskohtia ja mediakyselyjä Tailwindin 'selkeissä' apuohjelmissa, luo HTML-rakenne. Määritä sitten haluamasi arvo ' tyhjennä-
Esimerkki
Tässä esimerkissä käytämme ' md 'katkoskohta ' Tyhjennä molemmat 'apuohjelma ja' lg 'katkoskohta ' selkeä-ei mitään ' apuohjelma ' ” elementti muuttaa sijaintiaan keskikokoisella ja suurella näytöllä:
< kehon >
< div luokkaa = 'h-96 mx-10 p-8 bg-sky-500' >
< img src = 'tailwindcss_img.png' luokkaa = 'float-left p-3 w-28 h-24' kaikki = 'kuva' / >
< img src = 'tailwindcss_img.png' luokkaa = 'float-right p-3' kaikki = 'kuva' / >
< s luokkaa = 'text-justify clear-left md:clear-both lg:clear-none' > Tailwind CSS tarjoaa 'floats'-apuohjelmia, joilla ohjataan sisällön käärimistä elementin ympärille.
Tämä esimerkki näyttää, kuinka keskeytyskohtia ja mediakyselyjä käytetään 'clear' -apuohjelmalla Tailwindissä. < / s >
< / div >
< / kehon >
Tässä:
- 'kellu vasen' luokka kelluu elementit säiliön vasemmalle puolelle.
- 'kellu oikealle' luokka kelluu elementit kontin oikealle puolelle.
- 'selkeä vasen' luokka siirtää
-elementin vasemmalla kelluvan elementin alle säilössä.
- 'md: tyhjennä-molemmat' luokka tyhjentää sekä vasemman että oikean kellumisen ja sijoittaa
-elementin niiden alle keskikokoiselle näytölle.
- 'lg: selkeä-ei mitään' luokka poistaa käytöstä kaikki
-elementtiin sovellettavat tyhjennykset ja sallii elementin kellua säiliön molemmilla puolilla suuressa näytön koossa.
Lähtö
Yllä olevan tulosteen mukaan määritetyt keskeytyskohdat ja mediakyselyt on otettu onnistuneesti käyttöön 'clear' -apuohjelmassa.
Johtopäätös
Jos haluat käyttää keskeytyskohtia ja mediakyselyjä Tailwindin 'selkeissä' apuohjelmissa, määritä haluamasi arvo ' tyhjennä-