ఈ బ్లాగ్ క్రింది ప్రధాన భావనలను వివరిస్తుంది:
- టైల్విండ్లో బ్యాక్గ్రౌండ్ క్లిప్తో బ్రేక్పాయింట్లు మరియు మీడియా ప్రశ్నలను ఎలా ఉపయోగించాలి/ఉపయోగించాలి?
- టైల్విండ్లో బ్యాక్గ్రౌండ్ క్లిప్తో బ్రేక్పాయింట్లను వర్తింపజేయడం.
- Tailwindలో బ్యాక్గ్రౌండ్ క్లిప్తో మీడియా ప్రశ్నలను వర్తింపజేయడం.
టైల్విండ్లో బ్యాక్గ్రౌండ్ క్లిప్తో బ్రేక్పాయింట్లు మరియు మీడియా ప్రశ్నలను ఎలా ఉపయోగించాలి/ఉపయోగించాలి?
ది ' bg-క్లిప్-{కీవర్డ్} మూలకం యొక్క నేపథ్యం యొక్క సరిహద్దు పెట్టెను సెట్ చేయడానికి యుటిలిటీ ఉపయోగించబడుతుంది. ఈ యుటిలిటీని బహుళ లక్షణాలతో ఉపయోగించవచ్చు, ఉదాహరణకు ' పాడింగ్ బాక్స్ ',' సరిహద్దు పెట్టె ',' కంటెంట్ బాక్స్ ', మరియు' టెక్స్ట్ బాక్స్ ”.
ఉదాహరణ 1: టైల్విండ్లో బ్యాక్గ్రౌండ్ క్లిప్తో బ్రేక్పాయింట్లను వర్తింపజేయడం
ఈ ఉదాహరణ బ్యాక్గ్రౌండ్ క్లిప్తో బ్రేక్పాయింట్లను వర్తింపజేయడం ద్వారా వర్తించబడుతుంది “ bg-క్లిప్-{కీవర్డ్} 'ఉపయోగం' తో md ” అంటే, మీడియం సైజ్ స్క్రీన్లు మరియు “ lg ” అంటే, పెద్ద-పరిమాణ స్క్రీన్ తరగతులు:
< html >
< తల >
< మెటా అక్షర సమితి = 'utf-8' >
< మెటా పేరు = 'వ్యూపోర్ట్' విషయము = 'వెడల్పు=పరికర వెడల్పు, ప్రారంభ-స్థాయి=1' >
< స్క్రిప్ట్ src = 'https://cdn.tailwindcss.com' >< / స్క్రిప్ట్ >
< / తల >
< శరీరం >
< వచన ప్రాంతం తరగతి = 'bg-clip-border p-6 bg-yellow-500 border-4 border-red-500 border-dashed md:bg-clip-text lg:bg-clip-padding' > ఇది టైల్విండ్ CSS < / వచన ప్రాంతం >
< / శరీరం >
< / html >
ఈ కోడ్ లైన్ల ప్రకారం:
- ముందుగా, Tailwind ఫంక్షనాలిటీలను ఉపయోగించుకోవడానికి CDN పాత్ను పేర్కొనండి.
- ఆపై, '
గమనిక: యుటిలిటీని పేర్కొనడం అనేది ''లో పేర్కొన్నట్లుగానే ఉంటుంది. sm ” తరగతి.
అవుట్పుట్
స్క్రీన్ పరిమాణాన్ని విస్తరించిన తర్వాత, నేపథ్యం తదనుగుణంగా క్లిప్ చేయబడిందని ఈ ఫలితం సూచిస్తుంది.
ఉదాహరణ 2: టైల్విండ్లో బ్యాక్గ్రౌండ్ క్లిప్తో మీడియా ప్రశ్నలను వర్తింపజేయడం
కింది కోడ్ ప్రదర్శన “నేపథ్య క్లిప్” ద్వారా మీడియా ప్రశ్నలను వర్తింపజేస్తుంది @మీడియా 'నియమం మరియు పేర్కొన్న పరామితి:
< html >
< తల >
< మెటా అక్షర సమితి = 'utf-8' >
< మెటా పేరు = 'వ్యూపోర్ట్' విషయము = 'వెడల్పు=పరికర వెడల్పు, ప్రారంభ-స్థాయి=1' >
< స్క్రిప్ట్ src = 'https://cdn.tailwindcss.com' >< / స్క్రిప్ట్ >
< / తల >
< శరీరం >
< వచన ప్రాంతం తరగతి = 'p-6 bg-పసుపు-500 అంచు-4 అంచు-ఎరుపు-500 అంచు-గీత' id = 'ఉష్ణోగ్రత' >ఇది టైల్విండ్ CSS< / వచన ప్రాంతం >
< / శరీరం >
< శైలి రకం = 'టెక్స్ట్/సిఎస్ఎస్' >
#ఉష్ణోగ్రత {
నేపథ్య క్లిప్: సరిహద్దు పెట్టె;
}
@ మీడియా ( గరిష్టంగా- వెడల్పు :500px ) {
#ఉష్ణోగ్రత {
నేపథ్య-క్లిప్: పాడింగ్-బాక్స్;
} }
< / శైలి >
< / html >
ఈ కోడ్ స్నిప్పెట్లో:
- Tailwind CDN పాత్ను చేర్చడం మరియు “
- ఇప్పుడు, CSS కోడ్లో, డిఫాల్ట్ 'ని పేర్కొనండి నేపథ్య-క్లిప్ 'ఆస్తి' సరిహద్దు పెట్టె ”.
- ఆ తరువాత, అమలు చేయండి ' @మీడియా స్క్రీన్ వెడల్పు '500' పిక్సెల్లకు సమానం అయినంత వరకు, ఇచ్చిన పారామీటర్తో నియమం, ' నేపథ్య-క్లిప్ 'ఆస్తి సెట్ చేయబడింది' పాడింగ్ బాక్స్ ”.
అవుట్పుట్
ఈ ఫలితం నుండి, స్క్రీన్ మారిన వెడల్పుకు అనుగుణంగా బ్యాక్గ్రౌండ్ క్లిప్ మార్చబడిందని ధృవీకరించవచ్చు.
ముగింపు
బ్యాక్గ్రౌండ్ క్లిప్ను టైల్విండ్ బ్రేక్పాయింట్లు మరియు మీడియా క్వెరీస్తో అప్లై చేసిన “ద్వారా ఉపయోగించవచ్చు bg-క్లిప్-{కీవర్డ్} 'ఉపయోగం' తో md 'లేదా' lg 'తరగతులు, లేదా ' ద్వారా @మీడియా ” నియమం. కీవర్డ్ను 'ప్యాడింగ్-బాక్స్', 'బోర్డర్-బాక్స్', 'కంటెంట్-బాక్స్', 'టెక్స్ట్-బాక్స్' మరియు మరిన్నింటికి సెట్ చేయవచ్చు. ఈ గైడ్లో, మేము టైల్విండ్లో బ్యాక్గ్రౌండ్ క్లిప్తో బ్రేక్పాయింట్లు మరియు మీడియా ప్రశ్నల వినియోగాన్ని ప్రదర్శించాము.