டெயில்விண்டில் முன்னமைவை உருவாக்குவதற்கான முழுமையான செயல்முறையை இந்தக் கட்டுரை விவரிக்கிறது.
டெயில்விண்டில் 'ப்ரீசெட்' உருவாக்குவது எப்படி?
டெயில்விண்ட் ' முன்னமைவுகள் 'tailwind.config.js' உள்ளமைவு கோப்பில் குறிப்பிடப்பட்டுள்ள அதே உள்ளமைவைக் குறிப்பிடும் வழக்கமான உள்ளமைவுப் பொருள்களாகக் கருதப்படுகின்றன. முன்னமைக்கப்பட்ட கோப்பு முன்னிருப்பாக உருவாக்கப்படவில்லை, ஆனால் கீழே கொடுக்கப்பட்டுள்ள படிகளைப் பின்பற்றுவதன் மூலம் அதை உருவாக்கலாம்:
படி 1: 'முன்னமைக்கப்பட்ட' கோப்பை உருவாக்கவும்
முதலில், '' ஒன்றை உருவாக்கவும் preset.js ” டெயில்விண்ட் திட்டத்தில் கோப்பு மற்றும் நீட்டிப்புகள், தீம் மேலெழுதுதல், செருகுநிரல்களைச் சேர்த்தல் மற்றும் பல போன்ற தேவையான அனைத்து உள்ளமைவு விருப்பங்களையும் சேர்க்கவும்:
// எடுத்துக்காட்டு முன்னமைவு
தொகுதி. ஏற்றுமதி செய்கிறது = {
தீம் : {
வண்ணங்கள் : {
நீலம் : {
ஒளி : '#85d7ff' ,
இயல்புநிலை : '#1fb6ff' ,
இருள் : '#009 சேணம்' ,
} ,
இளஞ்சிவப்பு : {
ஒளி : '#ff7ce5' ,
இயல்புநிலை : '#ff49db' ,
இருள் : '#ff16d1' ,
} ,
சாம்பல் : {
இருண்ட : '#1f2d3d' ,
இருள் : '#3c4858' ,
இயல்புநிலை : '#c0cc இல்' ,
ஒளி : '#e0e6ed' ,
லேசான : '#f9fafc' ,
}
} ,
எழுத்துரு குடும்பம் : {
இல்லாமல் : [ 'கிராஃபிக்' , 'சான்ஸ் செரிஃப்' ] ,
} ,
அச்சகம் ' Ctrl+S ” மேலே உள்ள கோப்பை சேமிக்க.
படி 2: “tailwind.config.js” கோப்பைத் திருத்தவும்
அடுத்து, ' என்பதற்குச் செல்லவும் tailwind.config.js ' கட்டமைப்பு கோப்பு, டெம்ப்ளேட் பாதைகளின் பெயரைக் குறிப்பிடவும் அத்துடன் ' preset.js 'கோப்பு' முன்னமைவுகள் 'முக்கிய சொல்:
தொகுதி. ஏற்றுமதி செய்கிறது = {
உள்ளடக்கம் : [
'./index.html' ,
'./src/**/*.{js,ts,jsx,tsx}' ,
] ,
முன்னமைவுகள் : [
( 'preset.js' )
]
}
அச்சகம் ' Ctrl+S ” கோப்பை சேமிக்க.
படி 3: பயன்பாட்டை இயக்கவும்
இப்போது, ஏற்கனவே உள்ளதை இயக்கவும் ' விரைவான திட்டம் ” பின்வரும் கட்டளையை உள்ளிடுவதன் மூலம் வளர்ச்சி சேவையகத்தில்:
npm ரன் dev 
கடைசியாக, வெளியீட்டைக் காட்ட 'லோக்கல் ஹோஸ்ட்' இணைப்பைக் கிளிக் செய்யவும்.
வெளியீடு
பார்த்தபடி, வெளியீடு 'டெயில்விண்ட் CSS' ஸ்டைலிங் மூலம் ஒரு முக்கிய திட்டத்தை வழங்குகிறது.
முடிவுரை
டெயில்விண்டில், ' முன்னமைக்கப்பட்ட 'திட்டத்தில் கோப்பு மற்றும் அனைத்து கட்டமைப்புகள் குறிப்பிடவும்' tailwind.config.js ” கோப்பு அதில் உள்ளது. அதன் பிறகு, 'preset.js' கோப்பை 'tailwind.config.js' கோப்பில் 'முன்னமைக்கப்பட்ட' முக்கிய வார்த்தையின் உதவியுடன் குறிப்பிடவும். புதிதாக உருவாக்கப்பட்ட 'preset.js' கோப்பு, 'tailwind.config.js' கோப்பைப் போலவே குறிப்பிட்ட டெம்ப்ளேட்டில் அனைத்து தனிப்பயன் CSS ஐ உட்பொதிக்கும். டெயில்விண்டில் முன்னமைவை உருவாக்குவதற்கான முழுமையான செயல்முறையை இந்தக் கட்டுரை விளக்குகிறது.