Tailwind CSS - پرته له دې چې خپل HTML پریږدي په چټکۍ سره عصري ویب پاڼې جوړې کړئ

په اسانۍ سره پیچلي ډیزاینونه جوړ کړئ

د Tailwind CSS سره، د پیچلو ډیزاینونو رامینځته کول یو هوا کیږي. د کارونې ټولګیو او ځواب ویونکي ډیزاین اسانتیاو ترکیب تاسو ته اجازه درکوي پیچلي ترتیبونه په اسانۍ سره ډیزاین کړئ ، پرته له دې چې ستاسو د ویب پا ofې فعالیت او ساتلو وړتیا باندې جوړجاړی وکړئ.

هر څه جوړ کړئ

د Tailwind CSS ښکلا د هغې په استقامت کې ده. تاسو کولی شئ د ساده بلاګ پا pageې څخه پرمختللي ای کامرس پلیټ فارم ته هرڅه رامینځته کړئ ، پداسې حال کې چې د ورته هوښیار افادیت ټولګیو کارول.

تاسو یوازې د خپل تصور لخوا محدود یاست. د وینیلا سی ایس ایس کارولو څخه اصلي توپیر هغه سرعت دی چې تاسو کولی شئ دودیز ډیزاینونه جوړ کړئ.

د html اجزاو لکه div, div class, p class سره د دودیز css ټولګیو کارولو دودیز چلند تل یو اختیار دی مګر د سرعت پرمختګ چې د ټیل وینډ CSS سره راځي ستاسو ژوند اسانه کوي.

غوره تمرینونه واقعیا کار نه کوي

په دودیز ډول، CSS د نړیوالو سټایلونو سیټ رامینځته کولو او د اجزاو په اساس د اجزاو په اساس لیکل کیږي. پداسې حال کې چې دا یو مشهور میتود دی، دا کولی شي لوی، د ساتلو لپاره سخت کوډ لامل شي.

Tailwind CSS دا مفکوره ننګوي، دا استدلال کوي چې د ګټې اخیستنې لومړی CSS یو پاک، ډیر ساتلو وړ حل وړاندې کوي.

د Tailwind CSS لپاره خورا مشهور اجزا کتابتون

daisyUI د Tailwind CSS لپاره خورا مشهور اجزاو کتابتون دی، چې له 50 څخه ډیر مخکې ډیزاین شوي اجزاوې، 500+ یوټیلټي ټولګي، او په حقیقت کې نه ختمیدونکي امکانات لري. دا تاسو هرکله چې تاسو نوې پروژه رامینځته کوئ د څرخ له نوي کولو څخه وژغورئ.

هر ځل څرخ بیا اختراع مه کوئ

د هرې نوې پروژې لپاره د لسګونو ټولګیو نومونو لیکلو ستړي پروسې سره د خپل وخت ضایع کولو پرځای ، ټیل وینډ CSS تاسو ته وړتیا درکوي د یوټیلټي ټولګیو یو ښه تعریف شوی ، سیمانټیک سیټ وکاروئ.

دا ټولګي د بیا کارولو وړ دي او د CSS کاسکیډ سره په همغږي توګه کار کوي، تاسو ته ستاسو د ټولو پروژو لپاره یو پیاوړی بنسټ چمتو کوي.

Tailwind CSS - A Utility First CSS چوکاټ

د دې په اصلي برخه کې، ټیل وینډ CSS د کارونې لومړی CSS چوکاټ دی. دا پدې مانا ده چې دا د ټیټې کچې، د کمپوز وړ وړتیا ټولګي چمتو کوي چې تاسو کولی شئ د هر ډیزاین جوړولو لپاره وکاروئ، مستقیم ستاسو په HTML کې. نور نه ختمیدونکي CSS فایلونه ، یوازې ساده او رواني کوډ.

د سیمانټیک ټولګي نومونه وکاروئ

د سیمانټیک ټولګي نومونه ستاسو د کوډ لوستلو وړتیا ته وده ورکوي، دا اسانه کوي چې پوه شي چې یو ځانګړی ټولګی یوازې د نوم په کتلو سره څه کوي. دا یو له ډیرو ځانګړتیاو څخه دی چې د ټیل وینډ CSS د پراختیا کونکي تجربې ته وده ورکولو لپاره غوره کړې.

خالص سی ایس ایس. چوکاټ اګنوسټیک. هر ځای کار کوي

Tailwind CSS تاسو کوم ځانګړي چوکاټ ته نه اړوي. دا په ساده ډول خالص CSS دی، نو تاسو کولی شئ دا د هر چوکاټ سره وکاروئ، یا حتی د هیڅ چوکاټ سره. دا هر ځای کار کوي چې CSS کار کوي.

د Tailwind CSS ګټې

د Tailwind CSS کارولو ګټو کې د محصولاتو زیاتوالی، د CSS فایل اندازه کمول، او د یوټیلټي - لومړی میتودولوژي له امله د پراختیا کونکي تجربه شامله ده. برسیره پردې، د Just-In-Time (JIT) حالت د بریښنا ګړندی جوړونې وختونه چمتو کوي، ستاسو د پراختیا پروسه نوره هم ګړندۍ کوي.

Tailwind CSS قیمت

Tailwind CSS د خلاصې سرچینې پروژه ده، پدې معنی چې دا د کارولو لپاره په بشپړه توګه وړیا ده. لګښت راځي کله چې تاسو غواړئ پریمیم ب featuresو ته لاسرسی ومومئ لکه د UI اجزاو او ټیمپلیټونه ، کوم چې د Tailwind UI له لارې وړاندیز کیږي.

دا په ورته وخت کې د نظر وړ او انعطاف وړ دی

Tailwind CSS ستاسو د CSS جوړښت څرنګوالي په اړه قوي نظر وړاندې کوي ، مګر دا د دودیز کولو اجازه ورکولو لپاره کافي انعطاف وړ دی. دا توازن تاسو ته وړتیا درکوي په هغه څه تمرکز وکړئ چې خورا مهم دي - د ښکلي UIs جوړول.

عصري ځانګړتیاوې

Tailwind CSS عصري بڼې لکه Flexbox، Grid، او دودیز ملکیتونه جذبوي، دا د عصري ویب غوښتنلیکونو پراختیا لپاره غوره انتخاب جوړوي.

د Tailwind CSS کارولو لپاره شرایط

مخکې له دې چې تاسو د Tailwind CSS کارول پیل کړئ، تاسو د HTML او CSS بنسټیز پوهه ته اړتیا لرئ.

کله چې د Tailwind CSS وکاروئ

Tailwind CSS د هر ډول ویب پروژو لپاره مناسب دی، لوی یا کوچنی. که تاسو د CSS سره د غیږ کولو څخه ستړي یاست او د ډیر اغیزمن، پراختیا کونکي دوستانه حل په لټه کې یاست، نو د ټیل وینډ CSS ستاسو لپاره دی.

د اجزاو په چوکاټ کې نه؟

که تاسو د اجزاو چوکاټونو مینه وال نه یاست لکه عکس العمل یا Vue ، اندیښنه مه کوئ. Tailwind CSS چوکاټ - اګنوسټیک دی او د خالص HTML او JavaScript سره کارول کیدی شي.

د Tailwind CSS او نورو CSS چوکاټونو ترمنځ ورته والی او توپیرونه

پداسې حال کې چې نور چوکاټونه لکه بوټسټریپ او فاؤنڈیشن مخکې له مخکې ډیزاین شوي اجزا وړاندې کوي، ټیل وینډ CSS تاسو ته د HTML پریښودلو پرته په بشپړ ډول دودیز ډیزاینونو جوړولو لپاره وسایل درکوي. په هرصورت، د برخې کتابتونونو لکه daisyUI ادغام سره، تاسو اوس کولی شئ د دواړو نړۍ غوره څخه خوند واخلئ.

تیاره حالت

د Tailwind CSS او daisyUI یو له وروستي ځانګړتیاو څخه یو تیاره حالت دی، کوم چې تاسو ته وړتیا درکوي په اسانۍ سره تیاره تیم لرونکي ویب پاڼې جوړې کړئ.

د فلیکس بکس بیلګه

Tailwind CSS د عصري CSS ځانګړتیاو لکه Flexbox سره ښه مدغم کوي. د مثال په توګه، تاسو کولی شئ د ټولګیو په کارولو سره ځواب ورکوونکي ترتیب جوړ کړئ لکه فلیکس، جواز-مرکز، د توکو مرکز، او داسې نور.

د Just-in-Time د ترکیب سره، تاسو کولی شئ په اسانۍ سره د مختلف افادیت ټولګي ارزښتونه هڅه وکړئ. که د یوټیلټي ټولګي کار نه وي کړی، په ساده ډول یې د خپل عنصر دودیز کولو لپاره بدل کړئ.

د فلیکس بکس ترتیب بیلګه

د 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 ته مهاجرت وکړي.

DivMagic د ویب پرمختیا وسیله ده چې د ویب پراختیا کونکي او سافټویر پراختیا کونکو لپاره جوړه شوې ده. دا هر ډول سټایل ته اجازه ورکوي چې له وینیلا سی ایس ایس څخه Tailwind سی ایس ایس ته کاپي شي. په یو کلیک سره، تاسو کولی شئ په انټرنیټ کې هره برخه په ټیل وینډ CSS کې بدله کړئ او په خپله پروژه کې ټیل وینډ وکاروئ او سټایل هر هغه ډول تنظیم کړئ چې تاسو یې غواړئ.

د Tailwind CSS فلسفه کې ژور ډوب کړئ

د Tailwind CSS تر شا فلسفه په افادیت تمرکز کول دي. دا پدې مانا ده چې د اجزاو ټولګیو دمخه تعریف کولو پرځای، ټیل وینډ CSS د ټیټې کچې یوټیلټي ټولګي چمتو کوي چې تاسو ته دا وړتیا ورکوي چې ستاسو د HTML پریښودلو پرته ځانګړي ډیزاینونه جوړ کړئ.

ولې د دودیز CSS څخه لیرې لاړ شئ؟

دودیز سی ایس ایس کیدای شي د زیاتې کارونې سبب شي، د فلج شوي فایلونو، او 'div سوپ'. د یوټیلټي - لومړي سی ایس ایس چوکاټ ته د تللوینډ CSS په څیر لیږدولو سره، تاسو کولی شئ دا مسلې کم کړئ، په پایله کې پاک، ډیر منظم کوډبیس.

د یوټیلټي ټولګیو ځواک تجربه کړئ

د کارونې ټولګي تاسو سره مرسته کوي چې ستاسو د سټایل شیټونو په اوږدو کې د ورته سټایلونو تکرار څخه مخنیوی وکړئ. دا د "خپل ځان تکرار مه کوئ" (DRY) اصول دی. دا ټولګي ستاسو د پام وړ وخت او هڅې خوندي کوي او د خورا ساتلو وړ کوډبیس لامل کیږي.

د Tailwind CSS لارښوونو سپړنه

Tailwind CSS یو څو لارښوونې معرفي کوي چې ستاسو په سټایل شیټونو کې کارول کیدی شي. پدې کې شامل دي @apply، @variants، او @screen. د دې لارښوونو پوهیدل او کارول کولی شي ستاسو د ټیل وینډ CSS تجربه پراخه کړي. دا د Tailwind Config CSS فایل کې کیښودل کیدی شي. تاسو کولی شئ د دې طریقې په کارولو سره د سی ایس ایس ټولګي ولیکئ.

Tailwind CSS د پلگ انونو سره پراخ کړئ

Tailwind CSS د پلگ انونو سره غزول کیدی شي، نوي فعالیت اضافه کول یا موجوده یو دودیز کول. ستاسو د ویب پروژو موثریت او جمالیات اعظمي کولو لپاره د پلگ انونو د کارولو څرنګوالی زده کړئ.

په خپل کاري فلو کې د ټیل وینډ CSS شامل کړئ

ستاسو د پراختیا کاري فلو کې د Tailwind CSS ادغام مستقیم دی، که تاسو د ویبپیک یا پارسل په څیر جوړونکي وسایل کاروئ، یا د Next.js یا Gatsby په څیر چوکاټونو سره کار کوئ.

د Tailwind CSS سره د لاسرسي وده

Tailwind CSS په خپلو ټولګیو کې د ARIA ځانګړتیاوو د لړۍ په شمول د لاسرسي وړ ډیزاین هڅوي. ډیر د لاسرسي وړ انٹرفیسونه رامینځته کړئ او د هرچا لپاره د کارونکي تجربه لوړه کړئ.

د Tailwind CSS سره د Flexbox او Grid ځواک وکاروئ

د Tailwind CSS سره د Flexbox او Grid په څیر د عصري CSS ترتیب ماډلونه ګټه پورته کړئ. زده کړئ چې څنګه د انعطاف وړ او ځواب ویونکي ډول د ترتیب کنټرول لپاره د کارونې ټولګي کارول کیدی شي.

ستاسو د ټیل وینډ CSS پروژې ډیبګ کولو څرنګوالی

Tailwind CSS د ډیبګ کولو ډیری وسیلې او تخنیکونه وړاندې کوي چې د سټایل مسلو پیژندل او حل کول اسانه کوي. دا وسیلې درک کړئ او خپل د ډیبګ کولو مهارتونه لوړ کړئ.

د Tailwind CSS سره یو رنګین ویب جوړ کړئ

Tailwind CSS د دودیز وړ رنګونو پراخه پیلټ سره راځي. د دې رنګونو کارولو او دودیز کولو څرنګوالی زده کړئ ترڅو متحرک او لید زړه راښکونکي ډیزاینونه رامینځته کړي.

د Tailwind CSS JIT حالت سره ګړندی وده وکړئ

د Tailwind CSS په وخت کې د وخت حالت ته ژوره ورسوئ. پوه شئ چې دا څنګه کار کوي او دا څنګه کولی شي ستاسو پراختیا او وخت رامینځته کولو کې د پام وړ ګړندی کړي.

له صفر څخه هیرو ته: ماسټر ټیل وینډ CSS

د Tailwind CSS ماسټر کولو لپاره سفر پیل کړئ. ستاسو د چاپیریال تنظیم کولو څخه د پرمختللي موضوعاتو سپړلو پورې، دا جامع لارښود تاسو پوښلي.

ستاسو اړتیاو ته د ټیل وینډ سی ایس ایس تنظیم کړئ

د Tailwind CSS یو له لوی ځواک څخه د دې انعطاف دی. د خپلې پروژې د ځانګړو اړتیاو سره سم د ټیل وینډ دودیز کولو څرنګوالی زده کړئ.

د 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',
      }
    }
  }
}

ایا زه کوم سی ایس ایس فایل ته اړتیا لرم؟

یوازینی فایل چې تاسو یې د Tailwind CSS سره اړتیا لرئ د tailwind.config.js فایل دی.

دا فایل به ستاسو د ترتیب تنظیمات وساتي. تاسو به سی ایس ایس ونه لیکئ یا کوم بل سی ایس ایس فایل ولرئ. د دې ترتیب کولو فایل یوازینی دی چې تاسو ورته اړتیا لرئ.

د Tailwind CSS لپاره غوره عملونه کوم دي؟

د Tailwind CSS غوره کړنو په اړه د تفصيلي توضیحاتو لپاره، مهرباني وکړئ زموږ بله مقاله وګورئ Tailwind CSS غوره کړنې.

Tailwind CSS: د ویب ډیزاین راتلونکی

په دې اړه انعکاس وکړئ چې څنګه Tailwind CSS د ویب ډیزاین راتلونکی جوړوي. د ویب پراختیا صنعت کې د ودې لپاره د دې نفوذ او احتمال په اړه زده کړه.