Tailwind అనేది CSS ఫ్రేమ్‌వర్క్, ఇది రంగులు, అంతరం, ఫాంట్ పరిమాణాలు మొదలైన వివిధ లక్షణాల కోసం ముందే నిర్వచించిన విలువల సమితిని అందిస్తుంది. అయితే, కొన్నిసార్లు వినియోగదారులు కస్టమ్ వంటి డిఫాల్ట్ కాన్ఫిగరేషన్‌లో చేర్చబడని విలువను ఉపయోగించాలనుకోవచ్చు. రంగు లేదా నిర్దిష్ట మార్జిన్. ఈ పరిస్థితిలో, వారు ఏకపక్ష విలువలను ఉపయోగించవచ్చు.

ఈ కథనం Tailwind CSSలో ఏకపక్ష విలువలను ఉపయోగించే పద్ధతిని వివరిస్తుంది.

Tailwindలో ఏకపక్ష విలువలను ఎలా ఉపయోగించాలి?

టైల్‌విండ్ కాన్ఫిగరేషన్ ఫైల్‌లో నిర్వచించకుండా నేరుగా HTML క్లాస్ అట్రిబ్యూట్‌లో వ్రాయగలిగే కస్టమ్ విలువలను ఏకపక్ష విలువలు అంటారు. అవి [24px], [2.5rem] మొదలైన స్క్వేర్ బ్రాకెట్ సంజ్ఞామానంతో ప్రిఫిక్స్ చేయబడ్డాయి. టైల్‌విండ్‌లో ఏకపక్ష విలువలను ఉపయోగించుకోవడానికి, స్క్వేర్ బ్రాకెట్ సంజ్ఞామానాన్ని ఉపయోగించండి మరియు యుటిలిటీ క్లాస్‌లను డైనమిక్‌గా రూపొందించడానికి ఏదైనా అనుకూల విలువను పేర్కొనండి.

మెరుగైన గ్రహణశక్తి కోసం దిగువ జాబితా చేయబడిన దశలను చూడండి:

దశ 1: HTML ప్రోగ్రామ్‌లో ఏకపక్ష విలువలను ఉపయోగించండి

HTML ప్రోగ్రామ్‌ను రూపొందించండి మరియు కావలసిన తరగతులను సృష్టించడానికి ఏదైనా అనుకూల విలువతో స్క్వేర్ బ్రాకెట్ సంజ్ఞామానాన్ని ఉపయోగించండి. ఉదాహరణకు, మేము ఉపయోగించాము “bg-[#e9e516]”, “w-[600px]”, “h-[400px]”, “p-[13px]”, మరియు ఇతర తరగతులు:

ఇక్కడ:

• “bg-[#e9e516]” తరగతి
  యొక్క నేపథ్య రంగును సెట్ చేస్తుంది “#e9e516” (పసుపు).
• “w-[600px]” తరగతి
  వెడల్పును 600 పిక్సెల్‌లకు సెట్ చేస్తుంది.
• “h-[400px]” class
  మూలకానికి 400 పిక్సెల్‌ల ఎత్తును వర్తింపజేస్తుంది.
• “p-[13px]” క్లాస్
  యొక్క పాడింగ్‌ను 13 పిక్సెల్‌లకు సెట్ చేస్తుంది.
• “m-[19px]” క్లాస్
  మార్జిన్‌ను 19 పిక్సెల్‌లకు సెట్ చేస్తుంది.

• “టెక్స్ట్-[30px]” class

  మూలకం యొక్క ఫాంట్ పరిమాణాన్ని 30 పిక్సెల్‌లకు సెట్ చేస్తుంది.

• “టెక్స్ట్-[#7405ab]” క్లాస్

  మూలకం యొక్క టెక్స్ట్ కలర్‌ను పర్పుల్‌కి సెట్ చేసింది (#7405ab).

• “ట్రాకింగ్-[0.5rem]” క్లాస్ లెటర్-స్పేసింగ్‌ని 0.5 రెమ్ నుండి

  ఎలిమెంట్‌కి వర్తింపజేస్తుంది.

దశ 2: అవుట్‌పుట్‌ని ధృవీకరించండి

ఏకపక్ష విలువలు సరిగ్గా పని చేస్తున్నాయని నిర్ధారించుకోవడానికి, HTML వెబ్ పేజీని వీక్షించండి:

పై అవుట్‌పుట్ ఏకపక్ష విలువలు నిర్వచించిన విధంగా సరిగ్గా పని చేస్తున్నాయని సూచిస్తుంది.

ముగింపు

Tailwindలో ఏకపక్ష విలువలను ఉపయోగించుకోవడానికి, తరగతులను డైనమిక్‌గా రూపొందించడానికి HTML ప్రోగ్రామ్‌లో ఏదైనా అనుకూల విలువతో కూడిన చదరపు బ్రాకెట్ సంజ్ఞామానాన్ని ఉపయోగించండి. ఫాంట్ పరిమాణం, రంగు, వెడల్పు, ఎత్తు, మార్జిన్, పాడింగ్ మొదలైన సంఖ్యా లేదా రంగు విలువను ఆమోదించే ఏదైనా ఆస్తి కోసం వినియోగదారులు విలువలను ఉపయోగించవచ్చు. ఈ కథనం Tailwind CSSలో ఏకపక్ష విలువలను ఉపయోగించే పద్ధతిని వివరించింది.