టైల్‌విండ్‌లో అన్ని వైపులా పాడింగ్‌ను ఎలా జోడించాలి?

Tail Vind Lo Anni Vaipula Pading Nu Ela Jodincali



Tailwind CSS అనేది అనుకూలీకరించదగిన మరియు ప్రతిస్పందించే వెబ్ పేజీలు లేదా డిజైన్‌లను రూపొందించడానికి ఉపయోగించబడే ఒక ప్రసిద్ధ ఫ్రేమ్‌వర్క్. ఇది ఏ కస్టమ్ CSSని వ్రాయకుండా మూలకాల లేఅవుట్ మరియు అంతరాన్ని నియంత్రించడానికి వినియోగదారులను అనుమతిస్తుంది. పాడింగ్ అనేది నిర్దిష్ట మూలకం యొక్క కంటెంట్ మరియు దాని సరిహద్దు మధ్య ఖాళీ. కొన్నిసార్లు, వినియోగదారులు ఒక మూలకం యొక్క ప్రతి వైపుకు ఒకే మొత్తంలో పాడింగ్‌ని వర్తింపజేయాలనుకుంటున్నారు. Tailwind ఒక మూలకం యొక్క అన్ని వైపులా లేదా ఎగువ, కుడి, దిగువ లేదా ఎడమ వంటి నిర్దిష్ట వైపులా పాడింగ్‌ని వర్తింపజేయడానికి యుటిలిటీ తరగతులను అందిస్తుంది.

ఈ కథనం టైల్‌విండ్‌లోని మూలకం యొక్క అన్ని వైపులా పాడింగ్‌ను జోడించే పద్ధతిని ఉదాహరణగా చూపుతుంది.







టైల్‌విండ్‌లో అన్ని వైపులా పాడింగ్‌ను ఎలా జోడించాలి?

టైల్‌విండ్‌లోని నిర్దిష్ట మూలకం యొక్క అన్ని వైపులా పాడింగ్‌ను జోడించడానికి, HTML నిర్మాణాన్ని రూపొందించండి. అప్పుడు, నిర్దిష్ట మూలకంతో “p-” యుటిలిటీ క్లాస్‌ని ఉపయోగించండి. మూలకానికి పాడింగ్‌ని వర్తింపజేయడానికి కావలసిన విలువను పేర్కొనడం అవసరం. తర్వాత, మార్పులను నిర్ధారించడానికి HTML వెబ్ పేజీని తనిఖీ చేయండి.



వాక్యనిర్మాణం



< మూలకం తరగతి = 'p-' ... మూలకం >


''ని 2, 4, 12, 20 మొదలైన ఏదైనా కావలసిన సంఖ్యతో భర్తీ చేయండి.





ఉదాహరణ

ఈ ఉదాహరణలో, మనకు రెండు ఉన్నాయి '

”మూలకాలు మరియు మేము రెండు వేర్వేరు ప్యాడింగ్‌లను వర్తింపజేస్తాము అంటే “ p-8 'మరియు' p-14 ' వాళ్ళ మీద:



< శరీరం >

< div తరగతి = 'bg-pink-600 p-8 w-max' >
పాడింగ్ లో టైల్‌విండ్ CSS
div >

< br >

< div తరగతి = 'bg-teal-600 p-14 w-max' >
పాడింగ్ లో టైల్‌విండ్ CSS
div >

శరీరం >


ఇక్కడ, మొదటి

లో:

    • ' bg-పింక్-600 ” క్లాస్ పింక్ కలర్‌ను
      మూలకం నేపథ్యానికి సెట్ చేస్తుంది.
    • ' p-8 ”క్లాస్ కంటైనర్ యొక్క అన్ని వైపులా 8 యూనిట్ల పాడింగ్‌ను జోడిస్తుంది.
    • ' w-గరిష్టంగా ” క్లాస్
      మూలకం యొక్క వెడల్పును దాని గరిష్ట కంటెంట్ వెడల్పుకు సెట్ చేస్తుంది.

రెండవ

లో:

    • ' bg-teal-600 ” క్లాస్ టీల్ కలర్‌ని
      మూలకం నేపథ్యానికి సెట్ చేస్తుంది.
    • ' p-14 ”క్లాస్ కంటైనర్ యొక్క అన్ని వైపులా 14 యూనిట్ల ప్యాడింగ్‌ని వర్తిస్తుంది.
    • ' w-గరిష్టంగా ” క్లాస్
      మూలకం యొక్క వెడల్పును దాని గరిష్ట కంటెంట్ వెడల్పుకు సెట్ చేస్తుంది.

అవుట్‌పుట్


ఎగువ అవుట్‌పుట్ ప్రకారం, పేర్కొన్న ప్యాడింగ్ రెండు కంటైనర్‌ల అన్ని వైపులకు వర్తించబడింది.

ముగింపు

Tailwindలో మూలకం యొక్క అన్ని వైపులా పాడింగ్‌ను జోడించడానికి, HTML ప్రోగ్రామ్‌లో కావలసిన మూలకంతో “p-” యుటిలిటీ క్లాస్ ఉపయోగించబడుతుంది. ఎలిమెంట్‌కు పాడింగ్‌ను వర్తింపజేయడానికి వినియోగదారులు నిర్దిష్ట విలువను పేర్కొనాలి. ధృవీకరణ కోసం, HTML వెబ్ పేజీని తనిఖీ చేయండి మరియు మార్పులను నిర్ధారించుకోండి. ఈ కథనం టైల్‌విండ్‌లోని మూలకం యొక్క అన్ని వైపులా పాడింగ్‌ను జోడించే పద్ధతిని ఉదాహరణగా చూపింది.