Ovaj zapis će ilustrirati metodu za korištenje responzivnih prijelomnih točaka u Tailwind CSS-u.
Kako koristiti osjetljive prijelomne točke u Tailwindu?
Da biste koristili responzivne prijelomne točke u Tailwindu, koristite responzivne modifikatore, kao što je ' sm ”, “ doktor medicine ”, “ lg ”, “ xl ' i ' 2xl ” s ostalim klasama u HTML programu. Zatim pogledajte HTML web-stranicu i promijenite veličinu zaslona kako biste bili sigurni da prijelomne točke ispravno rade.
Korak 1: Koristite responzivne modifikatore u HTML programu
Napravite HTML program i upotrijebite responzivne modifikatore sa željenim stilom. Na primjer, koristili smo ' sm ”, “ doktor medicine ”, “ lg ”, “ xl ' i ' 2xl ” odgovarajući modifikatori:
< tijelo >
< div razreda = 'h-zaslon bg-fuksija-400 sm:bg-ružičasta-600 md:bg-green-700 lg:bg-ljubičasta-500 xl:bg-teal-600 2xl:bg-žuta-500' >
< h1 razreda = 'text-7xl text-white text-center p-20' > Savjet za Linux < / h1 >
< / div >
< / tijelo >
Ovdje:
- “ bg-fuksija-400 ” klasa postavlja boju pozadine za do fuksije.
- “ sm:bg-ružičasta-600 ” klasa primjenjuje ružičastu boju na pozadinu za male zaslone.
- “ md:bg-green-700 ” mijenja boju pozadine u zelenu na srednjim zaslonima.
- “ lg:bg-ljubičasta-50 ” klasa postavlja boju pozadine na ljubičastu za velike zaslone.
- “ xl:bg-teal-600 ” klasa primjenjuje plavozelenu boju na pozadinu za iznimno velike zaslone.
- “ 2xl:bg-žuta-500 ” klasa mijenja boju pozadine u žutu na 2xl ekranima.
Korak 2: Provjerite izlaz
Pogledajte HTML web-stranicu kako biste provjerili rade li responzivne prijelomne točke ispravno ili ne:
Na gornjoj web-stranici može se primijetiti da se boja web-stranice mijenja s veličinom zaslona prema kojoj su navedene prijelomne točke.
Zaključak
Da biste koristili responzivne prijelomne točke u Tailwindu, koristite responzivne modifikatore, kao što je ' sm ”, “ doktor medicine ”, “ lg ”, “ xl ' i ' 2xl ” s ostalim klasama u HTML programu. Ovi se modifikatori koriste za primjenu različitih stilova na određeni element na temelju veličine zaslona. Ovaj zapis je pokazao primjer metode za korištenje responzivnih prijelomnih točaka u Tailwind CSS-u.