Tailwind چیست؟
Tailwind CSS چیست؟
Tailwind CSS یک فریمورک CSS میباشد که برای نخستین دفعه به یوزرها قابلیت می دهد تا نرم افزار ها را سریع خیس و راحت خیس تولید نمایند. می توانید از کلاس های کاربردی برای طراحی سایت در مشهد در دست گرفتن پیرایش اجزا، رنگ ، مسافت، تایپوگرافی، سایه ها و مورد ها دیگر به کارگیری نمائید تا یک پیاده سازی کامپوننت تماما سفارشی فارغ از این که دور و برHTML تان را شکاف نمایید یا این که حتی یک خط CSS سفارشی بنویسید ، ساختوساز فرمایید.
به صورت نمونه فرض فرمایید می خواهید دکمه ای ساختوساز نمایید که طول اثبات، لایه افقی، رنگ پس مسئله مشکی، حاشیه های گرد و فونت سپید و نصفه برجسته داشته باشد . کد HTML شما بهاین شکل خواهد بود:
Buy now
HTML دربرگیرنده شش کلاس کاربردی میباشد. هریک از آنها بدین شکل تعریفوتمجید می شوند:
h-10: این کلاس دکمه را روی طول اثبات 10 واحد تهیه می نماید.
px-6: این کلاس لبه بندی افقی دکمه را روی 6 واحد تهیه و تنظیم می نماید .
font-semibold : این کلاس وزن یا این که سیاهی فونت دکمه را بر روی نصفه بولد قرار می دهد.
rounded-md: این کلاس شعاع کناره دکمه را طوری تهیه می نماید که کناره های گرد داشته باشند.
bg-black: این کلاس رنگ پس مسئله دکمه را سیاه می نماید.
text-white : این کلاس رنگ متن دکمه را سپید می نماید.
همانطور که ممکن میباشد در نظر گرفتن زده باشید، هنگام به کارگیری از تیلویند در رتبه اولیه بایستی با کلاس های کاربردی آن آشنا گردید. ولی وقتی کهاین فعالیت را ایفا دادید، می توانید با گاز و به صورت مداوم کامپوننت سفارشی مثل دکمه پایین تولید فرمایید.
حال که فریمورک تیلویند را خوب شعور کردید، اذن بدهید برخی از مزایای به کار گیری از آن را هم رسیدگی کنیم.
مزایای Tailwind CSS
استعمال از فریمورک CSS مثل تیلویند مزایای متعددی دارااست. به دنبال اکثر آنها توضیح داده گردیده اند:
نادر خیس مایحتاج میباشد که شما CSS سفارشی بنویسید. با تیلویند، عنصرها را با انجام کلاس های از گذشته جان دار مستقیما درHTML تان استایل دهی می نمایید. با به کارگیری از کلاس های کاربردی درین نحوه، می توانید طرح های سفارشی را سوای تایپ کردن CSS بسازید.
شما فولدر های CSS را خرد نگه می دارید. فارغ از فریمورکی مثل تیلویند، می بایست به طور همزمان با اضافه کردن خصوصیت ها و مؤلفه های تازه، به تایپ کردن CSS ادامه بدهید. در سود، فولدر های CSS شما هنگفت خیس می شوند. با به کار گیری از ابزار هایی مثل قابل انعطاف افزار Tailwind’s flexbox و ابزار های کناره بندی، بیشتر استایل ها قابل استعمال دوباره میباشند، به این ترتیب بهتدریج نیاز به تایپ کردن CSS تازه خواهید داشت .
شما ناچار نیستید از خودتان اسم کلاس تعریف و تمجید نمائید. با تیلویند شما کلاس ها را از یک سیستم پیاده سازی از پیش تعریف و تمجید گردیده گزینش می فرمائید. یعنی این که برای تعیین اسم های کلاس عالی برای مدل ها و کامپوننت های خاص به دردسر نمی افتید و مورد نیاز وجود ندارد مفاد بغرنج را به خیال بسپارید.
شما می توانید تغییرات ایمن تری ساخت و ساز نمایید. در نحوه سنتی ، در صورتیکه تغییراتی در CSS ساختوساز فرمایید، ممکن میباشد چیزی را در تارنما تان مبتلا اختلال گردد. برخلافCSS ، کلاس های ابزار در HTML شما محلی میباشند. این یعنی این که می توانید فارغ از نگرانی در باب تولید تغییرو تحول در چیز دیگری در وبسایت تان، آنها را تغییرو تحول بدهید.
چرا Tailwind CSS؟
درحال حاضر ممکن میباشد از خودتان بپرسید که چرا از تیلویند به مکان بقیه فریمورک های CSS استعمال کنیم؟ Tailwind CSS یک فریمورک سطح تحت میباشد. بدین معنا که برخلاف بقیه فریمورک های CSS مثل Bootstrap و Materialize، اجزای به طور کامل استایل دهی گردیده ای مثل دکمه ها، فهرست های آبشاری و نوار های ناوبری را ارائه نمی دهد. در ازای، کلاس های کاربردی را ارائه می دهد تا بتوانید اجزای قابل به کارگیری دوباره را ساخت نمایید.
تیلویند به همین عامل، انعطاف پذیری و در دست گرفتن بسیار بیشتری را بر روی ظواهر اپ شما نسبت به بقیه فریمورک های CSS مهیا می نماید. این فریمورک می تواند شمارا قوی نماید تا یک وبسایت مخصوص به فردتر ساختوساز نمائید .
مثال های Tailwind CSS
تیلویند مؤلفه ها و پوسته های رابط کاربری یا این که “مثال هایی” را ارائه می نماید تا به شما یاری دهد که اپ تان را سریع خیس بسازید.
تیلویند مخزنی ساخته که دربرگیرنده مثال هایی از شایسته ترین کاغذ فرود، قسمت های مرتبط با خصوصیت، هیبت های تصویب اسم در مجله، جداول، پنجره های مودال، هیبت های پرداخت ، سبد خرید و موردها دیگر میباشد. می توانید کد اکثر یا این که کلیه این مثال ها را با یک توشه هزینه برای بسته اخذ نمائید.
مخزن دیگر بوسیله اعضای انجمن تولید گردیده و منبع گشوده میباشد. درپی بر روی مثال هایی از این مخزن تمرکز خوا هیم کرد.