Kaip naudoti reaguojančius lūžio taškus „Tailwind“?

Šiame įraše bus parodytas metodas, kaip naudoti reaguojančius pertraukos taškus „Tailwind CSS“.

Kaip naudoti reaguojančius lūžio taškus „Tailwind“?

Norėdami naudoti reaguojančius pertraukos taškus programoje Tailwind, naudokite reaguojančius modifikatorius, pvz., „ sm “, „ md “, „ lg “, „ xl “ ir „ 2xl “ su kitomis HTML programos klasėmis. Tada peržiūrėkite HTML tinklalapį ir pakeiskite ekrano dydį, kad įsitikintumėte, jog lūžio taškai veikia tinkamai.

1 veiksmas: naudokite reaguojančius modifikatorius HTML programoje
Sukurkite HTML programą ir naudokite reaguojančius modifikatorius su norimu stiliumi. Pavyzdžiui, mes naudojome „ sm “, „ md “, „ lg “, „ xl “ ir „ 2xl “ reaguojantys modifikatoriai:

Čia:

• “ bg-fuksija-400 “ klasė nustato fono spalvą į fuksiją.
• “ sm: bg-rožinė-600 “ klasė mažų ekranų fone taiko rausvą spalvą.
• “ md:bg-green-700 “ klasė vidutiniuose ekranuose pakeičia fono spalvą į žalią.
• “ lg:bg-violetinė-50 “ klasė nustato didelių ekranų fono spalvą į violetinę.
• “ xl:bg-teal-600 “ klasė ypač didelių ekranų fone pritaiko melsvą spalvą.
• “ 2xl: bg-geltonas-500 ” klasė pakeičia fono spalvą į geltoną 2xl ekranuose.

2 veiksmas: patikrinkite išvestį
Peržiūrėkite HTML tinklalapį ir patikrinkite, ar reaguojantys lūžio taškai veikia tinkamai, ar ne:

---





---



Aukščiau esančiame tinklalapyje galima pastebėti, kad tinklalapio spalva keičiasi priklausomai nuo ekrano dydžio, pagal kurį buvo nurodytos lūžio taškai.





Išvada

Norėdami naudoti reaguojančius pertraukos taškus programoje Tailwind, naudokite reaguojančius modifikatorius, pvz., „ sm “, „ md “, „ lg “, „ xl “ ir „ 2xl “ su kitomis HTML programos klasėmis. Šie modifikatoriai naudojami skirtingiems stiliams pritaikyti konkrečiam elementui, atsižvelgiant į ekrano dydį. Šis įrašas parodė metodą, kaip naudoti reaguojančius pertraukos taškus „Tailwind CSS“.