Den här artikeln kommer att exemplifiera metoden för att tillämpa brytpunkter och mediefrågor på de 'tydliga' verktygen i Tailwind.
Hur använder man brytpunkter och mediafrågor på 'clear' i Tailwind?
För att tillämpa särskilda brytpunkter och mediefrågor på 'tydliga' verktyg i Tailwind, skapa en HTML-struktur. Definiera sedan det önskade värdet till ' clear-
Exempel
I det här exemplet kommer vi att använda ' md ' brytpunkt med ' klart-båda ' nytta och ' lg ' brytpunkt med ' klar-ingen ' verktyget i ' '-element för att ändra sin position på medelstor och stor skärmstorlek:
< kropp >
< div klass = 'h-96 mx-10 p-8 bg-sky-500' >
< img src = 'tailwindcss_img.png' klass = 'float-left p-3 w-28 h-24' allt = 'bild' / >
< img src = 'tailwindcss_img.png' klass = 'flyta-höger p-3' allt = 'bild' / >
< sid klass = 'text-justify clear-left md:clear-both lg:clear-none' > Tailwind CSS tillhandahåller 'floats'-verktyg för att styra lindningen av innehåll runt ett element.
Det här exemplet kommer att visa hur man använder brytpunkter och mediefrågor med 'clear'-verktyget i Tailwind. < / sid >
< / div >
< / kropp >
Här:
- 'flyta till vänster' klass flyter elementen till containerns vänstra sida.
- 'flyta-höger' klass flyter elementen till containerns högra sida.
- 'klart-vänster' class flyttar
-elementet under det vänsterflytande elementet i behållaren.
- 'md:clear-both' class rensar både vänster och höger flyter och placerar
-elementet under dem på medelstor skärmstorlek.
- 'lg:clear-none' class inaktiverar all rensning som appliceras på
-elementet och låter elementet flyta på behållarens båda sidor vid en stor skärmstorlek.
Produktion
Enligt ovanstående utdata har de angivna brytpunkterna och mediefrågorna tillämpats framgångsrikt på verktyget 'clear'.
Slutsats
För att tillämpa brytpunkter och mediefrågor på 'clear' verktyg i Tailwind, definiera det önskade värdet till ' clear-