டெயில்விண்ட் CSS இல் டெம்ப்ளேட் பாதைகளை எவ்வாறு கட்டமைப்பது

டெயில்விண்ட் CSS இல் டெம்ப்ளேட் பாதைகளை உள்ளமைப்பதற்கான செயல்முறையை இந்த இடுகை விளக்குகிறது.

டெயில்விண்ட் CSS இல் டெம்ப்ளேட் பாதைகளை எவ்வாறு கட்டமைப்பது?

' tailwind.config.js டெயில்விண்ட் CSS ஐ உட்பொதிக்க பயனர் விரும்பும் டெம்ப்ளேட் பாதைகளை உள்ளமைக்க கட்டமைப்பு கோப்பு பயன்படுத்தப்படுகிறது. இது முன்னிருப்பாக இல்லை எனினும் 'npm' தொகுப்பு மேலாளரைப் பயன்படுத்தி திட்டத்தில் உருவாக்க முடியும்.

'tailwind.config.js' கோப்பில் டெம்ப்ளேட் பாதைகளை உள்ளமைக்க இந்தப் பிரிவு சில முக்கிய படிகளைச் செய்கிறது.

குறிப்பு : “டெயில்விண்ட் CSS” ஐச் செயல்படுத்த, முதலில் “ஐ நிறுவவும் Node.js 'வழங்கப்பட்ட இணைப்பு வழியாக உங்கள் கணினியில் பயன்பாடு' https://nodejs.org/en ” கட்டளைகளை இயக்க.

படி 1: 'TailwindCSS' ஐ நிறுவவும்
முதலில், 'Project1' என்ற பெயரில் ஒரு புதிய திட்டத்தை உருவாக்கி, குறியீட்டு எடிட்டரில் திறக்கவும். இப்போது, ​​புதிய முனையத்தைத் திறந்து, பின்வரும் கட்டளையின் உதவியுடன் 'டெயில்விண்ட் CSS' ஐ நிறுவவும்:

மேலே உள்ள கட்டளையில், ' npm ” என்பது பின்வருமாறு “TailwindCSS” ஐ நிறுவும் முனை தொகுப்பு மேலாளர்:

'டெயில்விண்ட் CSS' மற்றும் அதன் தொகுப்புகள் வெற்றிகரமாக பதிவிறக்கம் செய்யப்பட்டதை இங்கே வெளியீடு காட்டுகிறது.

படி 2: டெயில்விண்ட் உள்ளமைவு கோப்பை உருவாக்கவும்
அடுத்து, டெயில்விண்ட் CSS உள்ளமைவு கோப்பை உருவாக்கவும் ' tailwind.config.js ” HTML டெம்ப்ளேட் பாதைகள், பயனர் வரையறுக்கப்பட்ட வகுப்புகள் மற்றும் இந்தக் கட்டளையைப் பயன்படுத்தி பலவற்றைக் குறிப்பிடுவது போன்ற அதன் செயல்பாட்டை நீட்டிக்க:

குறிப்பிட்ட உள்ளமைவு கோப்பு உருவாக்கப்பட்டதை வெளியீடு காட்டுகிறது. இப்போது, ​​'' tailwind.config.js ' கோப்பு:

படி 3: முதன்மை CSS கோப்பில் டெயில்விண்ட் வழிமுறைகளைச் சேர்க்கவும்
இப்போது, ​​உருவாக்கப்பட்ட டெயில்விண்ட் திட்டத்தில் சிறப்புச் செயல்பாட்டைச் சேர்ப்பதற்கு, பின்வரும் மூன்று முன்னரே உள்ள டெயில்விண்ட் வழிமுறைகளைச் சேர்க்கவும். style.css ' கோப்பு:

மேலே உள்ள குறியீடு தொகுதியில்:

• அடித்தளம் : இது 'Tailwind CSS' இன் முதல் அடுக்கு ஆகும், இது பின்னணி வண்ணம், உரை வண்ணம் அல்லது எழுத்துரு குடும்பம் போன்ற இயல்புநிலையாக வலைப்பக்க ஸ்டைலிங்கை மாற்றியமைக்கிறது.
• கூறுகள் : இந்த இரண்டாவது அடுக்கு 'கன்டெய்னர்' வகுப்பிற்குள் கிடைக்கிறது, இது உலாவி அளவிற்கு ஏற்ப அகலத்தை சேர்க்கிறது. அதன் பிரிவில், பயனர் தாங்களே உருவாக்கிய வெளிப்புற கூறுகளைச் சேர்க்கலாம்.
• பயன்பாடுகள் : இது நிழல்கள், வண்ணங்கள், சேர்த்தல், நெகிழ்வு மற்றும் பல வகுப்புகள் போன்ற கிட்டத்தட்ட அனைத்து ஸ்டைலிங் வகுப்புகளையும் சேர்க்கும் மூன்றாவது அடுக்கு ஆகும்.

இந்த உத்தரவுகளை பின்வரும் சாளரத்தில் காணலாம்:

படி 4: CSS ஐ உருவாக்கவும்
இப்போது, ​​பின்வரும் கட்டளையை இயக்குவதன் மூலம் டெயில்விண்ட் CLI கருவியைப் பயன்படுத்தி CSS ஐ உருவாக்கவும். இது அனைத்து டெம்ப்ளேட் கோப்புகளையும் ஸ்கேன் செய்து, CSS ஐ உருவாக்குகிறது. dist/output.css ' கோப்பு:

மேலே உள்ள கட்டளை வெற்றிகரமாக செயல்படுத்தப்படுவதை அவதானிக்கலாம். இப்போது, ​​'project1' இன் கோப்பு அமைப்பு இதுபோல் தெரிகிறது:

படி 5: ஒரு HTML டெம்ப்ளேட்டை உருவாக்கி அதன் பாதையை உள்ளமைக்கவும்
பயனர் 'Tailwind CSS' ஐ உட்பொதிக்க விரும்பும் HTML டெம்ப்ளேட்டை உருவாக்கி அதன் பாதையை ' tailwind.config.js ”. முதலில் பின்வரும் HTML டெம்ப்ளேட்டைப் பார்ப்போம் ' index.html ”:

மேலே உள்ள குறியீடு வரிகளில்:

• 'தலை' பிரிவு ' <இணைப்பு> 'உருவாக்கப்பட்ட/தொகுக்கப்பட்ட CSS கோப்பை இணைக்க குறிச்சொல்' /dist/output.css 'தற்போதுள்ள HTML கோப்புடன்' index.html ”.
• 'உடல்' பிரிவு முதலில் '

  'Tailwind class ஐப் பயன்படுத்தி முதல் துணைத் தலைப்பை வரையறுக்கும் குறிச்சொல்' உரை சீரமை 'மையத்தில்' அதன் சீரமைப்பை சரிசெய்ய, ' எழுத்துரு எடை 'உரையை 'தடித்த' செய்ய, ' உரை நிறம் 'குறிப்பிட்ட வண்ணத்தைச் சேர்க்க, மற்றும் ' பின்னணி நிறம் ” கொடுக்கப்பட்ட பின்னணி நிறத்தை முறையே பயன்படுத்தவும்.

• அடுத்து, '

  ' மற்றும் இந்த '

  ” குறிச்சொற்கள் மேலே விவாதிக்கப்பட்ட டெயில்விண்ட் வகுப்புகளையும் அவற்றின் உள்ளடக்கத்தை வடிவமைக்கப் பயன்படுத்துகின்றன.

HTML டெம்ப்ளேட் பாதையை உள்ளமைக்கவும்
அடுத்து, ''ஐத் திறக்கவும் tailwind.config.js ” மற்றும் HTML டெம்ப்ளேட் கோப்பின் “உள்ளடக்கம்” பிரிவில் இணைப்புகள் அல்லது பாதையைச் சேர்க்கவும், அதாவது “index.html”:

அச்சகம் ' Ctrl+S 'புதிய மாற்றங்களைச் சேமிக்க.

படி 6: HTML குறியீட்டை இயக்கவும்
கடைசியாக, லைவ் சர்வரில் HTML “index.html” குறியீட்டை இயக்கி அதன் வெளியீட்டைப் பார்க்கவும்:

வெளியீடு

பார்த்தபடி, டெயில்விண்ட் சிஎஸ்எஸ் உதவியுடன் ஸ்டைல் ​​செய்யப்பட்ட HTML உள்ளடக்கத்தை வெளியீடு காட்டுகிறது.

முடிவுரை

டெயில்விண்ட் CSS பயன்படுத்துகிறது ' tailwind.config.js 'உருவாக்கப்பட்ட HTML டெம்ப்ளேட் பாதைகளை உள்ளமைக்க கட்டமைப்பு கோப்பு. இது குறிப்பிடுகிறது ' உள்ளடக்கம் ” பிரிவில் அனைத்து HTML டெம்ப்ளேட்களின் சரியான பாதை, டெயில்விண்ட் கிளாஸ் பெயர்களைக் கொண்ட மூலக் கோப்புகள் மற்றும் ஜாவாஸ்கிரிப்ட் கூறுகள் ஆகியவை அடங்கும். இது குறிப்பிட்ட HTML கோப்பை ஸ்கேன் செய்து அதன் உள்ளடக்கத்தில் டெயில்விண்ட் CSS ஐ செயல்படுத்துகிறது. டெயில்விண்ட் CSS இல் டெம்ப்ளேட் பாதைகளை உள்ளமைப்பதற்கான முழுமையான செயல்முறையை இந்த இடுகை விளக்குகிறது.