= 'h-స్క్రీన్ p-10 sm:bg-red-700 md:bg-blue-600 lg:bg-green-500 xl:bg-పింక్-700 ' >

= 'టెక్స్ట్-3xl m-5 sm:టెక్స్ట్-వైట్ టెక్స్ట్-సెంటర్' >

Linux సూచన!

>

= 'text-2xl m-5 md:text-white text-center' >

ఈ ట్యుటోరియల్‌కి స్వాగతం

>

= 'text-2xl m-5 lg:టెక్స్ట్-వైట్ టెక్స్ట్-సెంటర్' >

టైల్‌విండ్ CSS

>

= 'టెక్స్ట్-2xl m-5 xl:టెక్స్ట్-వైట్ టెక్స్ట్-సెంటర్' >

థీమ్స్

>

>

శరీరం >

ఇక్కడ:

• ' -p-10 'మరియు' m-5 ” అనేవి అంతర ఆస్తి.
• ' sm ',' md ',' lg ', మరియు' xl ” అనేవి స్క్రీన్ ప్రాపర్టీస్.
• ' ఎరుపు-700 ',' నీలం-600 ',' ఆకుపచ్చ-500 ',' గులాబీ-700 ', మరియు' తెలుపు ” అనేవి రంగు లక్షణాలు.

దశ 2: HTML ప్రోగ్రామ్‌ను అమలు చేయండి

ఆపై, HTML వెబ్ పేజీని వీక్షించడానికి HTML ప్రోగ్రామ్‌ను అమలు చేయండి:

పై అవుట్‌పుట్‌లో, డిఫాల్ట్ స్క్రీన్‌లు, రంగులు మరియు స్పేసింగ్ ప్రాపర్టీలను చూడవచ్చు.

టైల్‌విండ్ థీమ్‌లో స్క్రీన్‌లు, రంగులు మరియు అంతరాన్ని ఎలా కాన్ఫిగర్ చేయాలి?

Tailwind థీమ్‌లో స్క్రీన్‌లు, రంగులు మరియు అంతరాన్ని కాన్ఫిగర్ చేయడానికి, అందించిన దశలను చూడండి:

• తెరవండి ' tailwind.config.js ” ఫైల్.
• వెళ్ళండి' థీమ్ ”విభాగం మరియు స్క్రీన్‌లు, రంగులు మరియు స్పేసింగ్ ప్రాపర్టీలను అవసరమైన విధంగా అనుకూలీకరించండి.
• HTML ప్రోగ్రామ్‌లో అనుకూలీకరించిన లక్షణాలను ఉపయోగించండి.
• ధృవీకరణ కోసం HTML వెబ్ పేజీని వీక్షించండి.

దశ 1: టెయిల్‌విండ్ కాన్ఫిగర్ ఫైల్‌లో స్క్రీన్‌లు, రంగులు మరియు స్పేసింగ్‌లను కాన్ఫిగర్ చేయండి

లో ' థీమ్ 'విభాగం' tailwind.config.js ” ఫైల్, స్క్రీన్‌లు, రంగులు మరియు స్పేసింగ్ ప్రాపర్టీలను అవసరానికి అనుగుణంగా అనుకూలీకరించండి. ఉదాహరణకు, మేము ఈ లక్షణాలను ఈ క్రింది విధంగా అనుకూలీకరించాము:

మాడ్యూల్ .ఎగుమతులు = {

విషయము : [ './index.html' ] ,

థీమ్ : {

//స్క్రీన్‌లను అనుకూలీకరించడం

తెరలు : {

sm : '480px' ,

md : '668px' ,

lg : '876px' ,

xl : '1100px' ,

} ,

// రంగులను అనుకూలీకరించడం

రంగులు : {

తెలుపు : #ffffff ,

నలుపు : '#000000' ,

నీలం : '#08609c' ,

ఆకుపచ్చ : '#089c28' ,

ఎరుపు : '#9c0306' ,

పసుపు : '#ede60e' ,

గులాబీ రంగు : '#ed0e55' ,

} ,

// అంతరాన్ని అనుకూలీకరించడం

అంతరం : {

px : '1px' ,

'0' : '0' ,

'1' : '0.25 రెం' ,

'2' : '0.5 రెం' ,

'3' : '0.75 రెం' ,

'4' : '1 విషయం' ,

'5' : '1.25 రెం' ,

'6' : '1.5 రెం' ,

'8' : '2rem' ,

'10' : '2.5 రెం' ,

'12' : '3రెం' ,

'16' : '4 రెమ్' ,

'ఇరవై' : '5 రెం' ,

}

} ,

} ;

ఈ కోడ్‌లో:

• ది ' తెరలు ”ప్రాపర్టీ వివిధ పరిమాణాల కోసం స్క్రీన్ బ్రేక్‌పాయింట్‌లను నిర్వచిస్తుంది. ఇది మారుపేర్లను (sm, md, lg, xl వంటివి) మరియు వాటికి సమానమైన విలువలను అందిస్తుంది.
• ది ' రంగులు ” ఆస్తి వారి పేరు మరియు హెక్సాడెసిమల్ విలువ జతలను ఉపయోగించి అనుకూల రంగులను నిర్వచిస్తుంది.
• ది ' అంతరం ”ప్రాపర్టీ అనేక పరిమాణాల కోసం కస్టమ్ స్పేసింగ్ విలువలను నిర్దేశిస్తుంది. ఇది 'rem' యూనిట్లలో నిర్దిష్ట అంతరం విలువలను సూచించడానికి మారుపేర్లను (px, 0, 1, 2, మొదలైనవి) ఉపయోగిస్తుంది.

దశ 2: HTML ప్రోగ్రామ్‌లో కాన్ఫిగర్ చేయబడిన ప్రాపర్టీలను ఉపయోగించండి

ఇప్పుడు, HTML ప్రోగ్రామ్‌లో అనుకూలీకరించిన లక్షణాలను ఉపయోగించండి:

<శరీరం >