Tailwind CSSలో ప్రతిస్పందించే బ్రేక్‌పాయింట్‌లను ఉపయోగించే పద్ధతిని ఈ రైట్-అప్ వివరిస్తుంది.
Tailwindలో రెస్పాన్సివ్ బ్రేక్‌పాయింట్‌లను ఎలా ఉపయోగించాలి?
Tailwindలో ప్రతిస్పందించే బ్రేక్‌పాయింట్‌లను ఉపయోగించడానికి, ' వంటి ప్రతిస్పందించే మాడిఫైయర్‌లను ఉపయోగించండి sm ',' md ',' lg ',' xl 'మరియు' 2xl HTML ప్రోగ్రామ్‌లోని ఇతర తరగతులతో. ఆపై, HTML వెబ్ పేజీని వీక్షించండి మరియు బ్రేక్ పాయింట్‌లు సరిగ్గా పని చేస్తున్నాయని నిర్ధారించుకోవడానికి స్క్రీన్ పరిమాణాన్ని మార్చండి.
దశ 1: HTML ప్రోగ్రామ్‌లో రెస్పాన్సివ్ మాడిఫైయర్‌లను ఉపయోగించండి
HTML ప్రోగ్రామ్‌ను రూపొందించండి మరియు కావలసిన స్టైలింగ్‌తో ప్రతిస్పందించే మాడిఫైయర్‌లను ఉపయోగించండి. ఉదాహరణకు, మేము ఉపయోగించాము ' sm ',' md ',' lg ',' xl 'మరియు' 2xl ప్రతిస్పందించే మాడిఫైయర్‌లు:
< శరీరం >
< div తరగతి = 'h-screen bg-fuchsia-400 sm:bg-pink-600 md:bg-green-700 lg:bg-purple-500 xl:bg-teal-600 2xl:bg-yellow-500' >
< h1 తరగతి = 'text-7xl టెక్స్ట్-వైట్ టెక్స్ట్-సెంటర్ p-20' > Linux సూచన < / h1 >
< / div >
< / శరీరం >
ఇక్కడ:
- ' bg-fuchsia-400 ” తరగతి నేపథ్య రంగును సెట్ చేస్తుంది fuchsia కు.
- ' sm:bg-pink-600 ”క్లాస్ చిన్న స్క్రీన్‌లకు బ్యాక్‌గ్రౌండ్‌కి పింక్ కలర్‌ని వర్తింపజేస్తుంది.
- ' md:bg-green-700 ” క్లాస్ మీడియం స్క్రీన్‌లపై బ్యాక్‌గ్రౌండ్ కలర్‌ని గ్రీన్‌కి మారుస్తుంది.
- ' lg:bg-purple-50 ” క్లాస్ పెద్ద స్క్రీన్‌ల కోసం బ్యాక్‌గ్రౌండ్ కలర్‌ని పర్పుల్‌కి సెట్ చేస్తుంది.
- ' xl:bg-teal-600 ” తరగతి అదనపు పెద్ద స్క్రీన్‌ల కోసం నేపథ్యానికి టీల్ కలర్‌ని వర్తింపజేస్తుంది.
- ' 2xl:bg-yellow-500 ” తరగతి 2xl స్క్రీన్‌లపై బ్యాక్‌గ్రౌండ్ కలర్‌ని పసుపు రంగులోకి మారుస్తుంది.
దశ 2: అవుట్‌పుట్‌ని ధృవీకరించండి
ప్రతిస్పందించే బ్రేక్‌పాయింట్‌లు సరిగ్గా పని చేస్తున్నాయో లేదో ధృవీకరించడానికి HTML వెబ్ పేజీని వీక్షించండి:
పై వెబ్ పేజీలో, బ్రేక్‌పాయింట్‌లు పేర్కొనబడిన స్క్రీన్ పరిమాణంతో వెబ్ పేజీ రంగు మారుతున్నట్లు గమనించవచ్చు.
ముగింపు
Tailwindలో ప్రతిస్పందించే బ్రేక్‌పాయింట్‌లను ఉపయోగించడానికి, ' వంటి ప్రతిస్పందించే మాడిఫైయర్‌లను ఉపయోగించండి sm ',' md ',' lg ',' xl 'మరియు' 2xl HTML ప్రోగ్రామ్‌లోని ఇతర తరగతులతో. ఈ మాడిఫైయర్‌లు స్క్రీన్ పరిమాణం ఆధారంగా నిర్దిష్ట మూలకానికి విభిన్న శైలులను వర్తింపజేయడానికి ఉపయోగించబడతాయి. ఈ రైట్-అప్ Tailwind CSSలో ప్రతిస్పందించే బ్రేక్‌పాయింట్‌లను ఉపయోగించే పద్ధతిని ఉదాహరణగా చూపింది.