Tailwind CSS - ඔබගේ HTML වලින් ඉවත් නොවී වේගයෙන් නවීන වෙබ් අඩවි ගොඩනඟන්න

පහසුවෙන් සංකීර්ණ මෝස්තර නිර්මාණය කරන්න

Tailwind CSS සමඟින්, සංකීර්ණ මෝස්තර නිර්මාණය කිරීම සුළඟක් බවට පත්වේ. උපයෝගිතා පන්ති සහ ප්‍රතිචාරාත්මක නිර්මාණ උපයෝගිතා සංයෝජනය මඟින් ඔබේ වෙබ් අඩවියේ කාර්ය සාධනය සහ නඩත්තු කිරීමේ හැකියාව කෙරෙහි සම්මුතියක් ඇති නොකර පහසුවෙන් සංකීර්ණ පිරිසැලසුම් නිර්මාණය කිරීමට ඔබට ඉඩ සලසයි.

ඕනෑම දෙයක් ගොඩනඟන්න

Tailwind CSS හි අලංකාරය එහි බහුකාර්යතාව තුළ පවතී. ඔබට සරල බ්ලොග් පිටුවක සිට උසස් ඊ-වාණිජ්‍ය වේදිකාවක් දක්වා ඕනෑම දෙයක් නිර්මාණය කළ හැකිය, සියල්ලම එකම බුද්ධිමය උපයෝගිතා පන්ති භාවිතා කරමින්.

ඔබ සීමා වන්නේ ඔබේ පරිකල්පනයෙන් පමණි. වැනිලා CSS භාවිතා කිරීමේ ප්‍රධාන වෙනස වන්නේ ඔබට අභිරුචි මෝස්තර ගොඩනගා ගත හැකි වේගයයි.

div, div class, p class වැනි html සංරචක සහිත අභිරුචි css පන්ති භාවිතා කිරීමේ සාම්ප්‍රදායික ප්‍රවේශය සැමවිටම විකල්පයකි, නමුත් Tailwind CSS සමඟ එන වේගය වැඩි දියුණු කිරීම ඔබේ ජීවිතය පහසු කරයි.

හොඳම භාවිතයන් ඇත්ත වශයෙන්ම වැඩ කරන්නේ නැත

සාම්ප්‍රදායිකව, CSS ලියා ඇත්තේ ගෝලීය ශෛලීන් සමූහයක් ස්ථාපිත කිරීම සහ සංරචක අනුව සංරචක පදනමක් මත ඒවා පිරිපහදු කිරීමෙනි. මෙය ජනප්‍රිය ක්‍රමයක් වන අතර, එය විශාල, නඩත්තු කිරීමට අපහසු කේතයකට මඟ පෑදිය හැක.

Tailwind CSS මෙම සංකල්පයට අභියෝග කරයි, උපයෝගිතා-පළමු CSS වඩා පිරිසිදු, වඩා නඩත්තු කළ හැකි විසඳුමක් ඉදිරිපත් කරයි.

Tailwind CSS සඳහා වඩාත් ජනප්‍රිය සංරචක පුස්තකාලය

daisyUI යනු Tailwind CSS සඳහා වන වඩාත් ජනප්‍රිය සංරචක පුස්තකාලය වන අතර, පෙර-නිර්මාණය කරන ලද සංරචක 50කට අධික ප්‍රමාණයක්, උපයෝගිතා පන්ති 500+ සහ ප්‍රායෝගිකව නිමක් නැති හැකියාවන් ගැන පුරසාරම් දොඩයි. ඔබ නව ව්‍යාපෘතියක් නිර්මාණය කරන සෑම අවස්ථාවකම රෝදය ප්‍රතිනිර්මාණය කිරීමෙන් එය ඔබව ගලවා ගනී.

සෑම විටම රෝදය නැවත නිර්මාණය නොකරන්න

සෑම නව ව්‍යාපෘතියක් සඳහාම පන්ති නම් දුසිම් ගණනක් ලිවීමේ වෙහෙසකර ක්‍රියාවලිය සමඟ ඔබේ කාලය නාස්ති කරනවා වෙනුවට, Tailwind CSS ඔබට හොඳින් අර්ථ දක්වා ඇති, අර්ථකථන උපයෝගිතා පන්ති කට්ටලයක් භාවිතා කිරීමට හැකියාව ලබා දෙයි.

මෙම පන්ති නැවත භාවිත කළ හැකි අතර CSS කඳුරැල්ල සමඟ එකඟව ක්‍රියා කරයි, ඔබේ සියලු ව්‍යාපෘති සඳහා ශක්තිමත් පදනමක් සපයයි.

Tailwind CSS - උපයෝගිතා පළමු CSS රාමුව

එහි හරය, Tailwind CSS යනු උපයෝගිතා-පළමු CSS රාමුවකි. මෙයින් අදහස් වන්නේ එය ඔබගේ HTML හි සෘජුවම ඕනෑම සැලසුමක් තැනීමට ඔබට භාවිතා කළ හැකි පහත් මට්ටමේ, සංයුක්ත උපයෝගිතා පන්ති සපයන බවයි. තවත් නිමක් නැති CSS ගොනු නැත, සරල සහ අවබෝධාත්මක කේතය පමණි.

අර්ථකථන පන්ති නාම භාවිතා කරන්න

අර්ථකථන පන්ති නම් ඔබේ කේතයේ කියවීමේ හැකියාව වැඩි දියුණු කරයි, එහි නම බැලීමෙන් නිශ්චිත පන්තියක් කරන්නේ කුමක්ද යන්න තේරුම් ගැනීම පහසු කරයි. මෙය සංවර්ධක අත්දැකීම වැඩිදියුණු කිරීම සඳහා Tailwind CSS විසින් අනුගමනය කරන ලද බොහෝ විශේෂාංගවලින් එකකි.

පිරිසිදු CSS. Framework Agnostic. සෑම තැනකම වැඩ කරයි

Tailwind CSS ඔබව කිසියම් නිශ්චිත රාමුවකට සම්බන්ධ නොකරයි. එය සරලව පිරිසිදු CSS වේ, එබැවින් ඔබට එය ඕනෑම රාමුවක් සමඟ හෝ කිසිදු රාමුවක් නොමැතිව භාවිතා කළ හැකිය. එය CSS ක්‍රියා කරන සෑම තැනකම ක්‍රියා කරයි.

Tailwind CSS හි ප්‍රතිලාභ

Tailwind CSS භාවිතා කිරීමේ ප්‍රතිලාභ අතර ඵලදායිතාව වැඩි වීම, CSS ගොනු ප්‍රමාණය අඩුවීම සහ උපයෝගිතා-පළමු ක්‍රමවේදය හේතුවෙන් වැඩිදියුණු කළ සංවර්ධක අත්දැකීමක් ඇතුළත් වේ. අතිරේකව, Just-In-Time (JIT) මාදිලිය අකුණු වේගයෙන් ගොඩනැගීමේ වේලාවන් සපයයි, ඔබේ සංවර්ධන ක්‍රියාවලිය තවදුරටත් වේගවත් කරයි.

Tailwind CSS මිලකරණය

Tailwind CSS යනු විවෘත මූලාශ්‍ර ව්‍යාපෘතියකි, එයින් අදහස් වන්නේ එය භාවිතා කිරීමට සම්පූර්ණයෙන්ම නොමිලේ බවයි. Tailwind UI හරහා පිරිනමනු ලබන UI සංරචක සහ අච්චු වැනි වාරික විශේෂාංග වෙත ප්‍රවේශ වීමට ඔබට අවශ්‍ය වූ විට පිරිවැය පැමිණේ.

එය මතවාදී සහ එකවර නම්‍යශීලී වේ

Tailwind CSS ඔබේ CSS ව්‍යුහගත කරන්නේ කෙසේද යන්න පිළිබඳ ප්‍රබල මතයක් සපයයි, නමුත් එය අභිරුචිකරණයට ඉඩ දීමට තරම් නම්‍යශීලී වේ. මෙම ශේෂය ඔබට වඩාත්ම වැදගත් දේ කෙරෙහි අවධානය යොමු කිරීමට හැකියාව ලබා දෙයි - අලංකාර UI ගොඩනැගීම.

නවීන ලක්ෂණ

Tailwind CSS Flexbox, Grid සහ අභිරුචි ගුණාංග වැනි නවීන විශේෂාංග වැලඳ ගන්නා අතර එය නවීන වෙබ් යෙදුම් සංවර්ධනය කිරීම සඳහා විශිෂ්ට තේරීමක් කරයි.

Tailwind CSS භාවිතා කිරීම සඳහා පූර්වාවශ්‍යතා

ඔබ Tailwind CSS භාවිතා කිරීම ආරම්භ කිරීමට පෙර, ඔබට HTML සහ CSS පිළිබඳ මූලික අවබෝධයක් අවශ්‍ය වේ.

Tailwind CSS භාවිතා කළ යුත්තේ කවදාද?

Tailwind CSS, විශාල හෝ කුඩා සියලුම ආකාරයේ වෙබ් ව්‍යාපෘති සඳහා සුදුසු වේ. ඔබ CSS සමඟ පොරබැදීමෙන් වෙහෙසට පත් වී වඩාත් කාර්යක්ෂම, සංවර්ධක-හිතකාමී විසඳුමක් සොයන්නේ නම්, Tailwind CSS ඔබ සඳහා වේ.

සංරචක රාමු තුළට නොවේද?

ඔබ React හෝ Vue වැනි සංරචක රාමු වල රසිකයෙක් නොවේ නම්, කරදර නොවන්න. Tailwind CSS රාමු-අඥෙයවාදී වන අතර එය පිරිසිදු HTML සහ JavaScript සමඟ භාවිතා කළ හැක.

Tailwind CSS සහ අනෙකුත් CSS රාමු අතර සමානකම් සහ වෙනස්කම්

Bootstrap සහ Foundation වැනි අනෙකුත් රාමු පෙර-නිර්මාණය කරන ලද සංරචක පිරිනමන අතර, Tailwind CSS ඔබට ඔබේ HTML හැර යාමෙන් තොරව සම්පූර්ණයෙන්ම අභිරුචි නිර්මාණ ගොඩනැගීමට මෙවලම් ලබා දෙයි. කෙසේ වෙතත්, daisyUI වැනි සංරචක පුස්තකාල ඒකාබද්ධ කිරීමත් සමඟ, ඔබට දැන් දෙලොවෙහිම හොඳම දේ භුක්ති විඳිය හැකිය.

අඳුරු මාදිලිය

Tailwind CSS සහ daisyUI හි නවතම විශේෂාංගවලින් එකක් වන්නේ අඳුරු ප්‍රකාරය වන අතර එමඟින් ඔබට අඳුරු තේමා වෙබ් අඩවි පහසුවෙන් නිර්මාණය කිරීමට හැකියාව ලැබේ.

Flexbox උදාහරණය

Tailwind CSS Flexbox වැනි නවීන CSS විශේෂාංග සමඟ හොඳින් ඒකාබද්ධ වේ. උදාහරණයක් ලෙස, ඔබට flex, justify-center, items-center යනාදී පන්ති භාවිතයෙන් ප්‍රතිචාරාත්මක පිරිසැලසුමක් සෑදිය හැක.

Just-in-Time සංයෝජනය සමඟින්, ඔබට විවිධ උපයෝගිතා පන්ති අගයන් පහසුවෙන් අත්හදා බැලිය හැක. එක් උපයෝගිතා පන්තියක් ක්‍රියා නොකළේ නම්, ඔබේ මූලද්‍රව්‍ය අභිරුචිකරණය කිරීමට එය වෙනස් කරන්න.

Flexbox පිරිසැලසුම් උදාහරණයක්

Tailwind CSS භාවිතයෙන්, ප්‍රතිචාරාත්මක සංචාලන තීරුවක් වැනි සංකීර්ණ පිරිසැලසුම් නිර්මාණය කිරීම පහසුය. මෙන්න උදාහරණයක්:

<nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6">
  <div class="flex items-center flex-shrink-0 text-white mr-6">
    <span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
  </div>
  <div class="block lg:hidden">
    <button class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
      <svg class="fill-current h-3 w-3" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v15z"></path></svg>
    </button>
  </div>
  <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
    <div class="text-sm lg:flex-grow">
      <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">Home</a>
      <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">About</a>
      <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white">Contact</a>
    </div>
  </div>
</nav>

සූදානම් කළ සංරචක

ඔබ ඔබේ ව්‍යාපෘතිය තුළ tailwind css කේතය භාවිත කිරීමට තීරණය කළේ නම්, ඔබට අන්තර්ජාලයේ බොහෝ පෙරනිමි සංරචක සොයා ගැනීමට හැකි වනු ඇත. ඔබට මේවායින් ඕනෑම එකක් පිටපත් කර ඔබේම වෙබ් අඩවියකට රිසිකරණය කළ හැකිය.

CSS Tailwind CSS බවට පරිවර්තනය කරන්නේ කෙසේද?

CSS Tailwind CSS පන්ති බවට පරිවර්තනය කිරීමට හැකිවීම බොහෝ සංවර්ධකයන්ට අවශ්‍ය දෙයකි. Tailwind CSS පැවතීමට පෙර අන්තර්ජාලයේ බොහෝ වෙබ් අඩවි ඇත. මෙම වෙබ් පිටු මෝස්තර පත්‍රිකාව සමඟ css භාවිතා කරන අතර වෙබ් සංවර්ධන වෘත්තිකයන්ට මෙම පිටු Tailwind CSS වෙත සංක්‍රමණය කිරීමට අවශ්‍ය වේ.

DivMagic යනු වෙබ් සංවර්ධකයින් සහ මෘදුකාංග සංවර්ධකයින් සඳහා ගොඩනගා ඇති වෙබ් සංවර්ධන මෙවලමකි. එය ඕනෑම විලාසිතාවක් වැනිලා css සිට Tailwind CSS දක්වා පිටපත් කිරීමට ඉඩ සලසයි. එක් ක්ලික් කිරීමකින්, ඔබට අන්තර්ජාලයේ ඇති ඕනෑම සංරචකයක් Tailwind CSS වෙත පරිවර්තනය කළ හැකි අතර ඔබේ ව්‍යාපෘතියේ Tailwind භාවිතා කර ඔබට අවශ්‍ය ඕනෑම ආකාරයකින් මෝස්තරය අභිරුචිකරණය කළ හැකිය.

Tailwind CSS දර්ශනයට ගැඹුරට කිමිදෙන්න

Tailwind CSS පිටුපස ඇති දර්ශනය වන්නේ උපයෝගීතාව කෙරෙහි අවධානය යොමු කිරීමයි. මෙයින් අදහස් කරන්නේ සංරචක පන්ති පූර්ව නිර්වචනය කිරීම වෙනුවට, Tailwind CSS ඔබේ HTML හැර යාමෙන් තොරව අද්විතීය මෝස්තර ගොඩනගා ගැනීමට ඔබට හැකි පහත් මට්ටමේ උපයෝගිතා පන්ති සපයයි.

සාම්ප්‍රදායික CSS වෙතින් ඉවත් වන්නේ ඇයි?

සාම්ප්‍රදායික CSS මඟින් අතික්‍රමණය කිරීම්, පුම්බන ලද ගොනු සහ 'div සුප්' අධික ලෙස භාවිතා කිරීමට හේතු විය හැක. Tailwind CSS වැනි උපයෝගිතා-පළමු CSS රාමුවකට මාරු වීමෙන්, ඔබට මෙම ගැටළු සමනය කළ හැකි අතර, එහි ප්‍රතිඵලයක් ලෙස පිරිසිදු, වඩාත් විධිමත් කේත පදනමක් ලැබේ.

උපයෝගිතා පන්තිවල බලය අත්විඳින්න

උපයෝගිතා පන්ති ඔබට ඔබේ මෝස්තර පත්‍රිකා පුරා එකම මෝස්තර නැවත නොකිරීමට උපකාරී වේ. එය "ඔබවම නැවත නොකරන්න" (DRY) මූලධර්මයකි. මෙම පන්ති ඔබට සැලකිය යුතු කාලය සහ ශ්‍රමය ඉතිරි කරන අතර ඉහළ නඩත්තු කළ හැකි කේත පදනමකට මග පාදයි.

Tailwind CSS විධානයන් ගවේෂණය කිරීම

Tailwind CSS ඔබේ මෝස්තර පත්‍ර තුළ භාවිත කළ හැකි විධාන කිහිපයක් හඳුන්වා දෙයි. මේවාට @apply , @variants , සහ @screen ඇතුළත් වේ. මෙම විධානයන් අවබෝධ කර ගැනීම සහ භාවිතා කිරීම ඔබේ Tailwind CSS අත්දැකීම බෙහෙවින් වැඩි දියුණු කළ හැක. මේවා Tailwind Config CSS ගොනුවේ තැබිය හැක. මෙම ප්රවේශය භාවිතා කර ඔබට css පන්ති ලිවිය හැක.

ප්ලගීන සමඟ Tailwind CSS දිගු කරන්න

Tailwind CSS ප්ලගීන සමඟින් දිගු කළ හැක, නව ක්‍රියාකාරිත්වය එක් කිරීම හෝ පවතින එක අභිරුචිකරණය කිරීම. ඔබේ වෙබ් ව්‍යාපෘතිවල කාර්යක්ෂමතාව සහ සෞන්දර්යය උපරිම කිරීමට ප්ලගීන භාවිතා කරන්නේ කෙසේදැයි ඉගෙන ගන්න.

Tailwind CSS ඔබේ කාර්ය ප්‍රවාහයට ඇතුළත් කරන්න

ඔබ Webpack හෝ Parcel වැනි ගොඩනැගීමේ මෙවලම් භාවිතා කරන්නේද, නැතහොත් Next.js හෝ Gatsby වැනි රාමු සමඟ වැඩ කරන්නේද, ඔබේ සංවර්ධන කාර්ය ප්‍රවාහයට Tailwind CSS ඒකාබද්ධ කිරීම සරලයි.

Tailwind CSS සමඟ ප්‍රවේශ්‍යතාව වැඩි දියුණු කරන්න

Tailwind CSS එහි පන්තිවල ARIA ගුණාංග පරාසයක් ඇතුළත් කිරීමෙන් ප්‍රවේශ විය හැකි නිර්මාණ දිරිමත් කරයි. වඩාත් ප්‍රවේශ විය හැකි අතුරුමුහුණත් සාදන්න සහ සෑම කෙනෙකුටම පරිශීලක අත්දැකීම වැඩි දියුණු කරන්න.

Tailwind CSS සමඟින් Flexbox සහ Grid හි බලය භාවිතා කරන්න

Tailwind CSS සමඟ Flexbox සහ Grid වැනි නවීන CSS පිරිසැලසුම් මොඩියුල භාවිතා කරන්න. නම්‍යශීලී සහ ප්‍රතිචාරාත්මක ආකාරයෙන් පිරිසැලසුම පාලනය කිරීමට උපයෝගිතා පන්ති භාවිතා කළ හැකි ආකාරය ඉගෙන ගන්න.

ඔබේ Tailwind CSS ව්‍යාපෘති දෝෂහරණය කරන්නේ කෙසේද?

Tailwind CSS විසින් මෝස්තර ගැටළු හඳුනා ගැනීම සහ විසඳීම පහසු කරන නිදොස් කිරීමේ මෙවලම් සහ ශිල්පීය ක්‍රම කිහිපයක් සපයයි. මෙම මෙවලම් තේරුම් ගෙන ඔබේ නිදොස් කිරීමේ කුසලතා වැඩි දියුණු කරන්න.

Tailwind CSS සමඟ වර්ණවත් වෙබ් එකක් සාදන්න

Tailwind CSS අභිරුචිකරණය කළ හැකි පුළුල් වර්ණ මාලාවක් සමඟ පැමිණේ. විචිත්‍රවත් සහ දෘශ්‍යමය වශයෙන් ආකර්ෂණීය මෝස්තර නිර්මාණය කිරීමට මෙම වර්ණ භාවිතා කරන ආකාරය සහ අභිරුචිකරණය කරන්නේ කෙසේදැයි ඉගෙන ගන්න.

Tailwind CSS JIT මාදිලිය සමඟින් වේගයෙන් සංවර්ධනය කරන්න

Tailwind CSS හි Just-In-Time මාදිලිය වෙත ගැඹුරින් සොයා බලන්න. එය ක්‍රියා කරන ආකාරය සහ එය ඔබේ සංවර්ධනය සැලකිය යුතු ලෙස වේගවත් කර කාලය ගොඩනඟා ගත හැකි ආකාරය තේරුම් ගන්න.

Zero සිට Hero දක්වා: Master Tailwind CSS

Tailwind CSS ප්‍රගුණ කිරීම සඳහා ගමනක් ආරම්භ කරන්න. ඔබේ පරිසරය සැකසීමේ සිට උසස් මාතෘකා ගවේෂණය කිරීම දක්වා, මෙම විස්තීර්ණ මාර්ගෝපදේශය ඔබ ආවරණය කර ඇත.

Tailwind CSS ඔබේ අවශ්‍යතා සඳහා අභිරුචිකරණය කරන්න

Tailwind CSS හි විශාලතම ශක්තීන්ගෙන් එකක් වන්නේ එහි නම්‍යශීලීභාවයයි. ඔබේ ව්‍යාපෘතියේ නිශ්චිත අවශ්‍යතාවලට ගැලපෙන පරිදි Tailwind අභිරුචිකරණය කරන්නේ කෙසේදැයි ඉගෙන ගන්න.

Tailwind CSS සමඟ අත්වැල් බැඳ ගැනීම

ප්‍රායෝගික උදාහරණ මාලාවක් හරහා ප්‍රායෝගිකව ඉගෙනීමෙහි නිරත වන්න. Tailwind CSS සහ DaisyUI භාවිතයෙන් විවිධ වෙබ් සංරචක ගොඩනගන්නේ කෙසේදැයි ගවේෂණය කරන්න.

වෙනත් CSS රාමු වලින් Tailwind CSS වෙත සංක්‍රමණය වීම

Tailwind CSS වෙත මාරු වීම සලකා බලනවාද? Tailwind සහ අනෙකුත් රාමු අතර ඇති ප්‍රධාන වෙනස්කම් තේරුම් ගන්න, සහ ඔබේ ව්‍යාපෘති සංක්‍රමණය කිරීම සඳහා ඵලදායී උපාය මාර්ග ඉගෙන ගන්න.

ඔබගේ සංක්‍රමණ වේගය සැලකිය යුතු ලෙස වැඩි කිරීමට ඔබට DivMagic හෝ සමාන මෙවලම් භාවිතා කළ හැක.

DivMagic වැනි වෙබ් සංවර්ධන මෙවලම් ඔබට එක් ක්ලික් කිරීමකින් ඕනෑම වෙබ් අඩවියකින් ඕනෑම මෝස්තරයක් සහ ඕනෑම මෝස්තරයක් පිටපත් කිරීමට ඉඩ සලසයි.

සරල උදාහරණයක්: ප්‍රතිචාරාත්මක කාඩ්පත් සංරචකයක් තැනීම

Tailwind CSS භාවිතයෙන් ඔබට ප්‍රතිචාරාත්මක කාඩ්පත් සංරචකයක් ගොඩනගා ගත හැකි ආකාරය පිළිබඳ උදාහරණයක් මෙන්න. මෙම සංරචකයේ රූපයක්, මාතෘකාවක් සහ විස්තරයක් අඩංගු වේ.

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img class="h-48 w-full object-cover md:w-48" src="/img/store.jpg" alt="Store">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Your Product</div>
      <p class="mt-2 text-gray-500">This is a brief description of your product. The card uses utility classes for padding, text color, and the uppercase font styling.</p>
    </div>
  </div>
</div>

Tailwind CSS සමඟ පෝරමයක් ගොඩනැගීම

Tailwind CSS සමඟ පෝරමයක් නිර්මාණය කිරීම සරල සහ අවබෝධාත්මක ය. මෙන්න සරල සම්බන්ධතා පෝරමයක්:

<div class="w-full max-w-xs">
  <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
    <div class="mb-4">
      <label class="block text-gray-700 text-sm font-bold mb-2" for="username">
        Username
      </label>
      <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Username">
    </div>
    <div class="mb-6">
      <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
        Password
      </label>
      <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="******************">
    </div>
    <div class="flex items-center justify-between">
      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
        Sign In
      </button>
    </div>
  </form>
</div>

Tailwind CSS අභිරුචිකරණය කිරීම

Tailwind CSS ඔබට එහි පෙරනිමි වින්‍යාසය අභිරුචිකරණය කිරීමට ඉඩ සලසයි, උපයෝගිතා පන්ති ඔබේ අවශ්‍යතාවයට අනුව සකස් කරයි. වර්ණ මාලාව අභිරුචිකරණය කරන්නේ කෙසේද යන්න පිළිබඳ උදාහරණයක් පහත දැක්වේ.

මෙම උදාහරණ Tailwind CSS හි නම්‍යශීලී බව සහ සරල බව පෙන්නුම් කරයි, ඒවා ඔබට නවීන, ප්‍රතිචාරාත්මක වෙබ් සංරචක කාර්යක්ෂමව සහ ඵලදායී ලෙස නිර්මාණය කිරීමට උපකාර කළ හැකි ආකාරය නිරූපණය කරයි.

module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-blue': '#243c5a',
        'custom-green': '#387c6d',
      }
    }
  }
}

මට CSS ගොනුවක් අවශ්‍යද?

Tailwind CSS සමඟ ඔබට අවශ්‍ය එකම ගොනුව වන්නේ tailwind.config.js ගොනුවයි.

එම ගොනුව ඔබගේ වින්‍යාස සැකසුම් රඳවා තබා ගනී. ඔබ css ලිවීම හෝ වෙනත් css ගොනුවක් නොතිබෙනු ඇත. ඔබට අවශ්‍ය වන්නේ මෙම වින්‍යාස ගොනුව පමණි.

Tailwind CSS සඳහා හොඳම භාවිතයන් මොනවාද?

Tailwind CSS හොඳම භාවිතයන් පිළිබඳ සවිස්තරාත්මක පැහැදිලි කිරීම සඳහා, කරුණාකර අපගේ අනෙක් ලිපිය Tailwind CSS හොඳම භාවිතයන් බලන්න.

Tailwind CSS: වෙබ් නිර්මාණයේ අනාගතය

Tailwind CSS වෙබ් නිර්මාණයේ අනාගතය හැඩගස්වන ආකාරය ගැන මෙනෙහි කරන්න. වෙබ් සංවර්ධන කර්මාන්තයේ වර්ධනය සඳහා එහි බලපෑම සහ විභවය ගැන ඉගෙන ගන්න.