ئەگەر دەتەوێت ماڵپەڕی مۆدێرن و وەڵامدەرەوە و سەرنجڕاکێش لە ڕووی بینراوەوە دروست بکەیت، Tailwind CSS چوارچێوەی ڕۆشتنی تۆیە. شۆڕشێک لە پرۆسەی نووسینی تەقلیدی CSS دەکات، ڕێگەت پێدەدات ڕووکارە تایبەتەکان ڕاستەوخۆ لە HTML ـەکەتدا دروست بکەیت. Tailwind CSS یەکێکە لە چوارچێوە بەناوبانگەکانی CSS کە هەفتانە زیاتر لە ٥ ملیۆن دامەزراندنی هەیە.
لەگەڵ Tailwind CSS دروستکردنی دیزاینی ئاڵۆز دەبێتە شتێکی ئاسان. تێکەڵکردنی پۆلەکانی سوودمەندی و سوودمەندی دیزاینی وەڵامدەرەوە ڕێگەت پێدەدات بە ئاسانی نەخشەی ئاڵۆز دیزاین بکەیت، بەبێ ئەوەی سازش لەسەر کارایی و پاراستنی ماڵپەڕەکەت بکەیت.
جوانی Tailwind CSS لە گشتگیربوونیدایە. دەتوانیت هەر شتێک لە لاپەڕەیەکی سادەی بلۆگەوە تا پلاتفۆرمی بازرگانی ئەلیکترۆنی پێشکەوتوو دروست بکەیت، هەموو ئەمانە لەکاتێکدا هەمان پۆلە سوودبەخشە ئینتێلێکتیڤەکان بەکاردەهێنیت.
تۆ تەنها بە خەیاڵت سنووردار دەبیت. جیاوازی سەرەکی لەگەڵ بەکارهێنانی ڤانێلا CSS خێرایی ئەوەیە کە دەتوانیت دیزاینی تایبەت دروست بکەیت.
شێوازی تەقلیدی بەکارهێنانی پۆلەکانی css تایبەت بە پێکهاتەکانی html وەک div، div class، p class هەمیشە بژاردەیە بەڵام باشترکردنی خێرایی کە لەگەڵ Tailwind CSS دێت ژیانت ئاسانتر دەکات.
بە شێوەیەکی نەریتی CSS بە دامەزراندنی کۆمەڵێک شێوازی جیهانی و پاڵاوتنیان لەسەر بنەمای پێکهاتە بە پێکهاتە دەنووسرێت. لە کاتێکدا ئەمە شێوازێکی بەناوبانگە، بەڵام دەتوانێت ببێتە هۆی کۆدی گەورە و سەختی پاراستن.
Tailwind CSS ئەم تێڕوانینە تەحەدا دەکات، بەو پێیەی کە CSS یەکەمی سوودمەندی چارەسەرێکی پاکتر و زیاتر پارێزگاری لێدەکرێت پێشکەش دەکات.
daisyUI بەناوبانگترین کتێبخانەی پێکهاتەکانە بۆ Tailwind CSS، شانازی بە زیاتر لە 50 پێکهاتەی پێشوەختە دیزاینکراو و 500+ پۆلی سوودمەندی و ئەگەری بێکۆتایی دەکات. هەر جارێک پڕۆژەیەکی نوێ دروست دەکەیت لە داهێنانەوەی ویلەکە ڕزگارت دەکات.
لەبری ئەوەی کاتت بەفیڕۆ بدەیت لەگەڵ پرۆسەی ماندووکردنی نووسینی دەیان ناوی پۆل بۆ هەر پڕۆژەیەکی نوێ، Tailwind CSS ڕێگەت پێدەدات کۆمەڵەیەکی باش پێناسەکراو و مانادار لە پۆلە سوودبەخشەکان بەکاربهێنیت.
ئەم پۆلانە دەتوانرێت دووبارە بەکاربهێنرێنەوە و بە هاوئاهەنگی لەگەڵ CSS cascade کاردەکەن، ئەمەش بناغەیەکی بەهێزت بۆ دابین دەکات بۆ هەموو پڕۆژەکانت.
لە ناوەڕۆکەکەیدا، Tailwind CSS چوارچێوەیەکی CSS ی یەکەمی سوودمەندییە. ئەمەش واتە پۆلی سوودمەندی ئاستی نزم و پێکهاتەدار دابین دەکات کە دەتوانیت بەکاری بهێنیت بۆ دروستکردنی هەر دیزاینێک، ڕاستەوخۆ لە HTML ـەکەتدا. چیتر فایلەکانی CSS بێکۆتایی نەما، تەنها کۆدی سادە و ئینتێلێکتیڤ.
ناوی پۆلە مانادارەکان خوێندنەوەی کۆدەکەت باشتر دەکەن، ئەمەش وا دەکات کە ئاسانتر تێبگەیت کە پۆلێکی دیاریکراو چی دەکات تەنها بە سەیرکردنی ناوەکەی. ئەمە یەکێکە لەو تایبەتمەندییە زۆرانەی کە Tailwind CSS وەریگرتووە بۆ باشترکردنی ئەزموونی گەشەپێدەر.
Tailwind CSS تۆ بە هیچ چوارچێوەیەکی دیاریکراوەوە نابەستێتەوە. بە سادەیی CSS ی پاکە، بۆیە دەتوانیت لەگەڵ هەر چوارچێوەیەکدا بەکاری بهێنیت، یان تەنانەت بەبێ هیچ چوارچێوەیەک بەهیچ شێوەیەک. لە هەموو شوێنێک کاردەکات کە CSS کاردەکات.
سوودەکانی بەکارهێنانی Tailwind CSS بریتین لە زیادکردنی بەرهەمهێنان، کەمکردنەوەی قەبارەی پەڕگەی CSS، و ئەزموونی گەشەپێدەر بەرزبوونەوەی بەهۆی میتۆدۆلۆژیای سوودمەندی یەکەم. سەرەڕای ئەوەش، دۆخی Just-In-Time (JIT) کاتەکانی دروستکردنی خێرا وەک ڕەشەبا دابین دەکات، ئەمەش زیاتر پرۆسەی پەرەپێدانەکەت خێراتر دەکات.
Tailwind CSS پڕۆژەیەکی سەرچاوە کراوەیە، واتە بەکارهێنانی تەواو ئازادە. تێچوونەکە کاتێک دێت کە بتەوێت دەستت بگات بە تایبەتمەندییە بەرزەکانی وەک پێکهاتەکانی UI و قاڵبەکان، کە لە ڕێگەی Tailwind UI پێشکەش دەکرێن.
Tailwind CSS بۆچوونێکی بەهێز دەدات لەسەر چۆنیەتی پێکهاتەکردنی CSS ـەکەت، لەگەڵ ئەوەشدا ئەوەندە نەرم و نیانە کە ڕێگە بە خۆکارکردن دەدات. ئەم هاوسەنگییە ڕێگەت پێدەدات کە سەرنجت لەسەر ئەو شتانە بێت کە زۆر گرنگە — دروستکردنی UI جوان.
Tailwind CSS تایبەتمەندییە مۆدێرنەکانی وەک Flexbox و Grid و تایبەتمەندییە تایبەتەکان لەخۆدەگرێت، ئەمەش وایکردووە ببێتە هەڵبژاردەیەکی نایاب بۆ پەرەپێدانی بەرنامەکانی وێبی مۆدێرن.
پێش ئەوەی دەست بکەیت بە بەکارهێنانی Tailwind CSS پێویستت بە تێگەیشتنێکی بنەڕەتییە لە HTML و CSS.
Tailwind CSS بۆ هەموو جۆرە پڕۆژەیەکی وێب گونجاوە، گەورە یان بچووک. ئەگەر بێزار بوویت لە زۆرانبازی لەگەڵ CSS و بەدوای چارەسەرێکی کاراتر و دۆستی گەشەپێدەردا دەگەڕێیت، ئەوا Tailwind CSS بۆ تۆیە.
ئەگەر هاندەری چوارچێوەی پێکهاتەکانی وەک React یان Vue نیت، نیگەران مەبە. Tailwind CSS framework-agnostic ە و دەتوانرێت بە HTML و جاڤاسکڕێپتی پاک بەکاربهێنرێت.
لە کاتێکدا چوارچێوەکانی تری وەک Bootstrap و Foundation پێکهاتەی پێشوەختە دیزاینکراو پێشکەش دەکەن، Tailwind CSS ئامرازەکانت پێدەدات بۆ دروستکردنی دیزاینی تەواو تایبەتمەند بەبێ ئەوەی HTML ـەکەت بەجێبهێڵیت. بەڵام بە یەکخستنی کتێبخانەی پێکهاتەکانی وەک daisyUI، ئێستا دەتوانیت چێژ لە باشترینەکانی هەردوو جیهان وەربگریت.
یەکێک لە نوێترین تایبەتمەندییەکانی Tailwind CSS و daisyUI دۆخی تاریکە، کە ڕێگەت پێدەدات بەبێ ماندووبوون ماڵپەڕی تاریکی تەوەرە دروست بکەیت.
Tailwind CSS بە باشی لەگەڵ تایبەتمەندییە مۆدێرنەکانی CSS وەک Flexbox یەکدەگرێتەوە. بۆ نموونە دەتوانیت نەخشەیەکی وەڵامدەرەوە دروست بکەیت بە بەکارهێنانی پۆلەکانی وەک flex، justify- center، items-center و هتد.
بە تێکەڵکردنی 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 لە پرۆژەکەتدا بەکاربهێنیت، دەتوانیت چەندین پێکهاتەی premade بە شێوەی ئۆنلاین بدۆزیتەوە. دەتوانیت هەریەکێک لەمانە کۆپی بکەیت و بۆ ماڵپەڕی خۆت خۆت بیکەیت.
توانای گۆڕینی CSS بۆ پۆلەکانی Tailwind CSS شتێکە کە زۆربەی گەشەپێدەران پێویستیانە. زۆر ماڵپەڕ لە ئینتەرنێتدا هەن کە پێش بوونی Tailwind CSS دروستکراون. ئەم وێب پەڕانە css بەکاردەهێنن لەگەڵ stylesheet و پیشەییەکانی پەرەپێدانی وێب دەیانەوێت ئەم لاپەڕانە بگوازنەوە بۆ Tailwind CSS.
DivMagic ئامرازێکی پەرەپێدانی وێبە کە بۆ گەشەپێدەرانی وێب و گەشەپێدەرانی نەرمەکاڵا دروستکراوە. ڕێگە دەدات هەر ستایلێک لە vanilla css کۆپی بکرێت بۆ Tailwind CSS. بە یەک کلیک دەتوانیت هەر پێکهاتەیەک لە ئینتەرنێتدا بگۆڕیت بۆ Tailwind CSS و Tailwind لە پرۆژەکەتدا بەکاربهێنیت و ستایلەکە بە هەر شێوەیەک بتەوێت خۆت بگۆڕیت.
فەلسەفەی پشت Tailwind CSS بریتییە لە گرنگیدان بە سوودمەندی. ئەمەش واتە لەبری ئەوەی پێشوەختە پۆلەکانی پێکهاتەکان پێناسە بکەیت، Tailwind CSS پۆلی سوودمەندی ئاستی نزم دابین دەکات کە توانات پێدەدات دیزاینی ناوازە دروست بکەیت بەبێ ئەوەی HTMLەکەت بەجێبهێڵیت.
ڕەنگە CSS ی تەقلیدی ببێتە هۆی بەکارهێنانی زۆری سەرپێچی، فایلە ئاوساوەکان و 'div soup'. بە گواستنەوە بۆ چوارچێوەی CSS ی یەکەمی سوودمەند وەک Tailwind CSS، دەتوانیت ئەم کێشانە کەم بکەیتەوە، لە ئەنجامدا بنکەیەکی کۆدێکی پاکتر و ڕێکخراوتر.
پۆلە سوودبەخشەکان یارمەتیت دەدەن کە هەمان ستایلەکان لە سەرانسەری ستایل شیتەکانتدا دووبارە نەکەیتەوە. بنەمایەکی "خۆت دووبارە مەکەرەوە" (DRY). ئەم پۆلانە کات و هەوڵێکی بەرچاوت بۆ پاشەکەوت دەکەن و دەبنە هۆی بنکەیەکی کۆد کە زۆر پارێزگاری لێدەکرێت.
Tailwind CSS چەند ڕێنمایییەک دەناسێنێت کە دەتوانرێت لەناو ستایلشیتەکانتدا بەکاربهێنرێت. لەوانە @apply , @variants , و @screen. تێگەیشتن و بەکارهێنانی ئەم ڕێنماییانە دەتوانێت ئەزموونی Tailwind CSS ی تۆ زۆر بەرز بکاتەوە. ئەمانە دەتوانرێت لە فایلە CSS ی Tailwind Config دابنرێن. دەتوانیت بە بەکارهێنانی ئەم ڕێگایە پۆلەکانی css بنووسیت.
دەتوانرێت Tailwind CSS بە پێوەکراوەکان درێژ بکرێتەوە، زیادکردنی کارایی نوێ یان خۆکارکردنی ئەو کاراییەی کە هەیە. فێربە چۆن پلاگینەکان بەکاربهێنیت بۆ ئەوەی کارایی و جوانکاری پڕۆژەکانی وێبەکەت زۆرترین بێت.
یەکخستنی Tailwind CSS لە کاری پەرەپێدانەکەتدا ئاسانە، جا تۆ ئامرازەکانی دروستکردن وەک Webpack یان Parcel بەکاربهێنیت، یان کار لەگەڵ چوارچێوەی وەک Next.js یان Gatsby بکەیت.
Tailwind CSS هانی دیزاینی دەستڕاگەیشتن دەدات بە خستنەڕووی کۆمەڵێک تایبەتمەندی ARIA لە پۆلەکانیدا. دروستکردنی ڕووکارێکی دەستڕاگەیشتنتر و بەرزکردنەوەی ئەزموونی بەکارهێنەر بۆ هەمووان.
بەکارهێنانی مۆدیولەکانی نەخشەی CSS مۆدێرن وەک Flexbox و Grid لەگەڵ Tailwind CSS. فێربە کە چۆن دەتوانرێت پۆلە سوودبەخشەکان بەکاربهێنرێت بۆ کۆنترۆڵکردنی نەخشە بە شێوەیەکی نەرم و نیان و وەڵامدەرەوە.
Tailwind CSS چەندین ئامراز و تەکنیک بۆ چاککردنەوە دابین دەکات کە ناسینەوە و چارەسەرکردنی کێشەکانی ستایل ئاسانتر دەکات. لەم ئامرازانە تێبگە و تواناکانی چاککردنەوەت بەرز بکەرەوە.
Tailwind CSS لەگەڵ پالێتێکی فراوانی ڕەنگەکاندا دێت کە دەتوانرێت بەپێی خواستی خۆت بێت. فێربە چۆن ئەم ڕەنگانە بەکاربهێنیت و بەپێی خواستی خۆت دروستی بکەیت بۆ دروستکردنی دیزاینی زیندوو و سەرنجڕاکێش لە ڕووی بینراوەوە.
قووڵتر بچۆ ناو دۆخی Just-In-Time ی Tailwind CSS. تێبگە کە چۆن کاردەکات و چۆن دەتوانێت گەشەکردنت بە شێوەیەکی بەرچاو خێراتر بکات و کاتەکانت دروست بکات.
دەست بکە بە گەشتێک بۆ شارەزابوون لە Tailwind CSS. لە دانانی ژینگەکەتەوە تا گەڕان بەدوای بابەتگەلی پێشکەوتوودا، ئەم ڕێنماییە گشتگیرە تۆی ڕوماڵی کردووە.
یەکێک لە گەورەترین خاڵە بەهێزەکانی Tailwind CSS نەرمی و نەرمییەتی. فێربە چۆن Tailwind بە خواستی خۆت دابنێیت بۆ ئەوەی لەگەڵ پێداویستییە تایبەتەکانی پڕۆژەکەتدا بگونجێت.
لە ڕێگەی کۆمەڵێک نموونەی پراکتیکیەوە بەشداری فێربوونی دەستی بکە. لێکۆڵینەوە بکە لە چۆنیەتی دروستکردنی چەندین پێکهاتەی وێب بە بەکارهێنانی Tailwind CSS و DaisyUI.
بیر لە گۆڕینی بۆ 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 ئاسان و ئینتێلێکتیڤە. لێرەدا فۆڕمێکی پەیوەندی سادەتان بۆ دەخەینەڕوو:
<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 نیشان دەدەن، کە نیشان دەدەن کە چۆن دەتوانن یارمەتیت بدەن لە دروستکردنی پێکهاتەی وێبی مۆدێرن و وەڵامدەرەوە بە شێوەیەکی کارا و کاریگەر.
module.exports = {
theme: {
extend: {
colors: {
'custom-blue': '#243c5a',
'custom-green': '#387c6d',
}
}
}
}
تاکە پەڕگەیەک کە پێویستت پێیەتی لەگەڵ Tailwind CSS پەڕگەی tailwind.config.js ە.
ئەو پەڕگەیە ڕێکخستنەکانی ڕێکخستنەکانت دەگرێت. تۆ css نانووسیت و هیچ فایلێکی تری cssت نابێت. ئەم فایلە ڕێکخستنە تاکە فایلە کە پێویستت پێی دەبێت.
بۆ ڕوونکردنەوەی ورد لەسەر باشترین پراکتیزەکانی Tailwind CSS، تکایە سەیری بابەتەکەی ترمان بکە باشترین پراکتیزەکانی Tailwind CSS.
بیر لەوە بکەرەوە کە چۆن Tailwind CSS داهاتووی دیزاینی وێب لە قاڵب دەدات. فێربە دەربارەی کاریگەری و توانای گەشەکردنی لە پیشەسازی پەرەپێدانی وێبدا.
فیدباکت وەرگرتووە یان کێشەیەک؟ لە ڕێگەی پلاتفۆرمەکەمانەوە ئاگادارمان بکەرەوە، ئێمەش مامەڵە لەگەڵ ئەوانی تردا دەکەین!
بەشداری لیستی ئیمەیڵی DivMagic بکە!
© 2024 DivMagic, Inc. هەموو مافەکان پارێزراوە.