Tailwind CSS என்றால் என்ன? ஆப் உருவாக்குபவர்களுக்கான எளிய வழிகாட்டி

Tailwind CSS என்பது வலைத்தளங்களை அலங்கரிப்பதற்கான ஒரு கருவித்தொகுப்பு. தனிக் கோப்பில் தனித்தனி style விதிகளை எழுதுவதற்குப் பதிலாக, ஒவ்வொரு கூறுக்கும் சிறிய, தயார் வகுப்புப் பெயர்களைக் கொடுக்கிறீர்கள்: வெள்ளைப் பின்னணிக்கு bg-white, உள்இடைவெளிக்கு p-4, பெரிய எழுத்துக்கு text-lg, வட்ட மூலைகளுக்கு rounded-xl. உலாவிக்குத் தேவையான CSS-ஐ Tailwind உருவாக்குகிறது. இது இலவசம், திறந்த மூலம், நவீன வலை ஆப்கள் அலங்கரிக்கப்படும் மிகப் பொதுவான வழிகளில் ஒன்று.

AI உடன் உருவாக்கும்போது Tailwind ஏன் முக்கியம்

AI ஆப் பில்டர் மூலம் வலை ஆப் உருவாக்கினால், உங்கள் ஆப் Tailwind மூலம் அலங்கரிக்கப்பட்டிருக்க நல்ல வாய்ப்பு உள்ளது. எடுத்துக்காட்டாக, Mythex வேறு எதையும் கேட்காவிட்டால் புதிய திட்டங்களை Vite + React + TypeScript + Tailwind மீது தொடங்குகிறது (தொழில்நுட்பம் எப்படித் தேர்வாகிறது).

இது உங்களுக்கு மூன்று வகைகளில் முக்கியம்:

• வடிவமைப்பு மாற்றங்கள் எளிது. Style ஒவ்வொரு பொத்தான், அட்டை, தலைப்புக்கும் அருகிலேயே இருப்பதால், "அட்டைகளை இவ்வளவு நெருக்கடியாக வைக்காதே" என்பதை AI ஒரே இடத்தில் சில வகுப்புப் பெயர்களைத் திருத்தி செய்ய முடியும்.
• நீங்கள் படிக்க முடியும். Tailwind வகுப்புகள் எளிய ஆங்கிலத்திற்கு நெருக்கமானவை. text-center font-bold text-2xl என்பதைப் புரிந்துகொள்வது கடினமல்ல, நீங்கள் ஒருபோதும் கோடு எழுதாதவராக இருந்தாலும்.
• தோற்றம் ஒரே மாதிரி இருக்கும். Tailwind அளவுகள், இடைவெளிகள், வண்ணங்களின் நிலையான அளவுகோலுடன் வருகிறது. இதனால் ஒரு ஆப்பில் 14 சற்று வேறுபட்ட சாம்பல் நிறங்கள் வருவதைத் தவிர்க்கிறது.

அன்றாட உதாரணம்

ஒரு வீடு கட்டுவதையும் வண்ணம் பூசுவதையும் நினையுங்கள்.

சாதாரண CSS என்பது ஒவ்வொரு சுவருக்கும் நீங்களே வண்ணத்தைக் கலப்பது போன்றது. முழு சுதந்திரம் உண்டு, ஆனால் சிறிது நேரத்தில் வரவேற்பறை "சூடான வெள்ளை", நடைபாதை "கொஞ்சம் சூடான வெள்ளை" ஆகிவிடும், ஏன் என்று யாருக்கும் நினைவிருக்காது.

Tailwind என்பது ஒரு வண்ண அட்டவணையும், பெயரிட்ட ஒட்டுவில்லைகளின் தொகுப்பும் போன்றது. ஒவ்வொரு சுவருக்கும் ஒரு ஒட்டுவில்லை கிடைக்கும் — "வெள்ளை, மேட், இரண்டு பூச்சு" — அட்டவணை தேர்ந்தெடுக்கப்பட்ட நிழல்களை மட்டுமே தரும். கொஞ்சம் சுதந்திரம் குறையும், ஆனால் வேலையில் உள்ள அனைவரும் ஒட்டுவில்லையைப் படித்தே ஒவ்வொரு சுவரும் எப்படி இருக்க வேண்டும் என்று சரியாகத் தெரிந்துகொள்வார்கள்.

Tailwind எப்படி வேலை செய்கிறது

வலைப்பக்கம் HTML (உள்ளடக்கம் மற்றும் அமைப்பு) மற்றும் CSS (தோற்றம்) ஆகியவற்றால் ஆனது. பொதுவாக CSS ஒரு தனிக் கோப்பில் இப்படிப்பட்ட விதிகளாக இருக்கும்:

.card {
  background: white;
  padding: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

Tailwind உடன், அந்த விதியை எழுதத் தேவையில்லை; பயன்பாட்டு வகுப்புகளை நேரடியாக கூறின் மீது வைக்கிறீர்கள்:

<div class="bg-white p-4 rounded-xl shadow-sm">
  Your booking is confirmed
</div>

ஒவ்வொரு வகுப்பும் ஒரு சிறிய வேலையைச் செய்கிறது. ஆப் உருவாக்கப்படும்போது, Tailwind உங்கள் கோப்புகளை ஸ்கேன் செய்து, நீங்கள் உண்மையில் பயன்படுத்திய வகுப்புகளைக் கண்டறிந்து, அவற்றுக்கான CSS-ஐ மட்டும் உருவாக்குகிறது. அதனால் இறுதி stylesheet சிறியதாக இருக்கும்.

Tailwind பதிப்பு 4, தற்போதைய முக்கியப் பதிப்பு, மிகக் குறைந்த அமைப்புடன் வருகிறது: அதை நிறுவி, உங்கள் build கருவியில் அதன் plugin-ஐச் சேர்த்து, CSS கோப்பின் மேலே @import "tailwindcss"; என்று எழுதுங்கள். பிராண்ட் வண்ணங்கள், எழுத்துருக்கள் போன்ற தனிப்பயனாக்கங்கள், பழைய பதிப்புகளுக்குத் தேவைப்பட்ட பெரிய JavaScript config கோப்புக்குப் பதிலாக, CSS-இல் design tokens ஆக வரையறுக்கப்படுகின்றன. tailwind.config.js என்று குறிப்பிடும் பழைய பயிற்சியைப் படித்தால், அதுதான் காரணம்.

ஓர் எடுத்துக்காட்டு: விலை அட்டை

AI பில்டரிடம் ஒரு விலைப் பக்கம் கேட்டீர்கள், "Pro" அட்டை தனித்துத் தெரிய வேண்டும் என்று வைத்துக்கொள்ளுங்கள். அந்த அட்டையின் கோடு இப்படி இருக்கலாம் (React கூறில் class என்பது className என்று எழுதப்படும்):

<div className="rounded-2xl border border-gray-200 p-6">
  <h3 className="text-lg font-semibold">Pro</h3>
  <p className="mt-2 text-4xl font-bold">$25</p>
  <button className="mt-6 w-full rounded-lg bg-gray-900 px-4 py-2 text-white">
    Start trial
  </button>
</div>

இடமிருந்து வலமாகப் படித்தால்:

"நீல எல்லையும் மெல்லிய நிழலும் கொண்டு Pro அட்டையைத் தனித்துக் காட்டு" என்று கேட்டால், AI border-gray-200-ஐ border-2 border-blue-600 ஆக மாற்றி shadow-lg சேர்க்கலாம். மாற்றம் அவ்வளவுதான்.

பதிலளிக்கும் வடிவமைப்பும் dark mode-உம்

திரை அளவுகள் மற்றும் நிலைகளுக்கு Tailwind குறுகிய முன்னொட்டுகளைக் கொண்டுள்ளது:

• md:grid-cols-3 — நடுத்தரத் திரைகளிலும் அதற்கு மேலும் மூன்று நெடுவரிசைகள்; கைப்பேசியில் இயல்பான ஒற்றை நெடுவரிசை பொருந்தும். Tailwind mobile-first: முன்னொட்டு இல்லாத வகுப்புகள் எல்லா இடங்களிலும் பொருந்தும், முன்னொட்டுகள் பெரிய திரைகளுக்கான மாற்றங்களைச் சேர்க்கும்.
• hover:bg-gray-700 — சுட்டி மேல் இருக்கும்போது பொத்தான் கருமையாகும்.
• dark:bg-gray-900 — dark mode இயக்கத்தில் இருக்கும்போது வேறு பின்னணி.

அதனால்தான் Tailwind திட்டத்தில் கைப்பேசிக்கு ஏற்ற அமைப்பு அல்லது dark mode கேட்பது பொதுவாக விரைவாக முடியும்.

முக்கியச் சொற்கள்

பொதுவான தவறான கருத்துகள்

• "Tailwind ஒரு வடிவமைப்பு." அல்ல. Tailwind உங்களுக்குக் கட்டுமானத் தொகுதிகளைத் தருகிறது, ஒரு தோற்றத்தை அல்ல. இரண்டு Tailwind தளங்கள் முற்றிலும் வேறு போல் தெரியலாம். பொதுவான "AI ஆப் தோற்றம்" இயல்புநிலைகளிலிருந்து வருகிறது, Tailwind-இலிருந்து அல்ல — உங்கள் பில்டருக்கு உண்மையான வழிகாட்டுதலைக் கொடுங்கள். பார்க்க: AI உடன் நல்ல தோற்றமுள்ள ஆப்பை எப்படி வடிவமைப்பது.
• "இது inline styles போன்றது." முழுமையாக அல்ல. வகுப்புகள் ஒரு பகிரப்பட்ட அளவுகோலிலிருந்து வருகின்றன, hover, dark mode, திரை அளவுகளை ஆதரிக்கின்றன, build நேரத்தில் சாதாரண CSS ஆக மாற்றப்படுகின்றன.
• "Tailwind பக்கங்களை கனமாக்குகிறது." Build நீங்கள் பயன்படுத்தும் வகுப்புகளை மட்டுமே சேர்ப்பதால், பார்வையாளர்களுக்கு அனுப்பப்படும் CSS பொதுவாகச் சிறியதாக இருக்கும்.
• "நீண்ட வகுப்புப் பட்டியல்கள் குழப்பமான கோடு என்று பொருள்." முதலில் பரபரப்பாகத் தெரியலாம், ஆனால் ஒரு கூறின் தோற்றம் பற்றிய அனைத்தும் ஒரே இடத்தில் இருக்கும். மீண்டும் வரும் வடிவங்கள் பொதுவாக ஒரே Button போன்ற கூறுகளுக்குள் கொண்டு வரப்படும்.
• "Tailwind பயன்படுத்தினால் தனிப்பயன் CSS பயன்படுத்த முடியாது." தேவைப்படும்போதெல்லாம் வழக்கமான CSS-ஐ இன்னும் எழுதலாம்.

உங்கள் AI பில்டரிடம் என்ன கேட்பது

• "பிராண்ட் வண்ணங்களையும் எழுத்துருக்களையும் ஒருமுறை theme tokens ஆக வரையறுத்து, கடினமாக எழுதப்பட்ட வண்ணங்களுக்குப் பதிலாக எல்லா இடங்களிலும் பயன்படுத்தவும்."
• "ஒவ்வொரு அட்டை, பொத்தான், உள்ளீட்டுப் பெட்டியும் ஒரே வட்ட மூலை அளவையும் இடைவெளியையும் பயன்படுத்தட்டும்."
• "கைப்பேசி அகலத்தில் அமைப்பைச் சரிபார்த்து, வெளியே வழியும் அல்லது தட்டுவதற்குச் சிறியதாக இருக்கும் எதையும் சரிசெய்யவும்."
• "Tailwind-இன் dark: variant மூலம் dark mode சேர்த்து, எழுத்து மாறுபாடு படிக்கும்படி இருப்பதை உறுதி செய்யவும்."
• "மீண்டும் வரும் பொத்தான் style-களை ஒரே மீண்டும்-பயன்படுத்தக்கூடிய Button கூறாக மாற்றவும்."
• "இந்தப் பிரிவின் Tailwind வகுப்புகளை எளிய ஆங்கிலத்தில் விளக்கவும்."

Mythex-இல் Tailwind

புதிய Mythex திட்டங்கள் இயல்பாக React மற்றும் TypeScript உடன் Tailwind-ஐப் பயன்படுத்துகின்றன. அதனால் காட்சி மாற்றங்களை எளிய வார்த்தைகளில் கேட்டு, நேரடி Preview-இல் பார்க்கலாம். கோடைப் பார்க்க விரும்பினால், கோட் எடிட்டர் ஒவ்வொரு வகுப்பையும் காட்டும் (Free-இல் படிக்க மட்டும், Pro-இல் திருத்தலாம்). சாதாரண CSS அல்லது வேறு அமைப்பு விரும்பினால், முதல் prompt-இலேயே சொல்லுங்கள் — docs தொழில்நுட்ப அடுக்கு எப்படித் தேர்வாகிறது என்று விளக்குகிறது.

கேள்விகள்