فریم‌ورک tailwind چطوری css نوشتن رو به صفر می‌رسونه ؟

تیلویند یک چهارچوب نسبتا جدید و utility-first برای css است که در سال‌های اخیر توجه زیادی را به خود جلب کرده و توانسته محبوبیت بسیار زیادی در بین برنامه‌نویس‌های وب به دست بیاورد.

این فریم‌ورک رویکرد utility-first را در پیش گرفته که به این معنی‌ است که بجای ساختن کامپوننت‌های آماده و با تغییرات ظاهری جزئی مثل bootstrap به شما قابلیت ساخت کامپوننت‌های پیچیده و شخصی‌سازی شده با استفاده از کلاس‌های کمکی بدون نیاز به ساختن کلاس توسط خود شما یا نوشتن css را می‌دهد.

‍‍

برای این که دید بهتری داشته باشید نگاهی به کد زیر و نتیجه‌ی آن بندازید

123456789101112131415161718192021222324252627282930313233343536373839404142<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

<style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

همون طور که می‌بینید تونستیم با کد بالا یک المان زیبا تولید کنیم. اما حالا تصور کنید که بجای این‌ که این‌طوری به نوشتن css ادامه بدیم، بتونیم از کلاس‌های آماده‌ استفاده کنیم، اما با این قابلیت که هیچ تعریفی از قبل براش وجود نداشته باشه و هر طور که دلمون بخواد بتونیم کامپوننت‌هامون رو استایل بدیم.

برای گرفتن نتیجه بالا با استفاده tailwind کد زیر رو ببینید.

123456789<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="flex-shrink-0">
    <img class="h-12 w-12"  data-src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-gray-500">You have a new message!</p>
  </div>
</div>

حالا فرض کنید بتونیم برای تمام المان‌هامون از کلاس‌های این شکلی کمک بگیریم ! قطعا زمان بسیار زیادی رو صرفه جویی می‌کنیم و برای تغییر دادن و شخصی‌سازی کردنش هم خیلی دست‌مون باز تره.

توی مثال بالا بزارید چند تا از کلاس‌ها رو با هم بررسی کنیم. برای مثال کلاس p-6 باعث میشه که المان div روت ما از هر چهار طرف به یک واحدی ( که داخل سایت tailwind می‌تونید لیست‌ش رو ببینید ) padding داشته باشه.

مگه میشه برای همش کلاس نوشت ؟

شاید با خودتون بگید خب اگر بخوایم برای همه‌ی این‌ها کلاس بنویسیم خیلی کلاس میشه که. ولی tailwind تقریبا برای همه‌ی موارد فکر کرده. مثلا اگر بخواید فقط از چپ و راست یا بالا و پایین padding بدید می‌تونید از py-6 یا px-6 استفاده کنید. تعداد عدد‌هایی که داره هم بسیار زیاده طوری که تقریبا هر مقداری که دلتون بخواد می‌تونید padding بدید.

این موضوع فقط یکی از کلاس‌ها بود. فرض کنید که بخواید به المان‌تون shadow بدید. خب tailwind در این مرحله‌ هم تعداد زیادی کلاس در اختیارتون می‌زاره مثل shadow-sm – shadow-md shadow – shadow-lg و …

این کلاس‌ها تقریبا برای هر کاری که بخواهید بکنید کافیه و برای لیست کامل‌شون می‌تونید از مستندات tailwind استفاده کنید.

این فریم‌ورک کاملا قابلیت استفاده برای سایت‌های responsive رو هم داره. برای مثال می‌تونید افقی یا عمودی بودن فرزندان یک کانتینر flex رو به راحتی مشخص کنید.

1234<div class="flex flex-col lg:flex-row">
<div>1</div>
<div>2</div>
</div>

توی مثال بالا وقتی سایز صفحه از lg ( که داخل فایل کانفیگ می‌تونید مشخص کنید مقدارش رو ) بیشتر بشه مقدار flex-direction رو روی row می‌زاره و سایز‌های کوچیک‌تر روی مقدار column. تعداد کلاس زیاد دیگه‌ای برای همین مورد هم موجود هست مثل row-reverse یا …

یکی از نکات خوب درباره‌ی این فریم‌ورک این هست که با توجه به فایل کانفیگی که داره و شما می‌تونید اون رو تغییر بدید، می‌تونید بسیاری کلاس‌های مورد نظر خودتون رو تولید کنید. مثلا فرض کنید بخواید یک کلاس برای سایه به اسم shadow-ali تولید کنید که مقدار سایه مورد نظرتون رو میده. به راحتی می‌تونید این کار رو از طریق فایل کانفیگ انجام بدید.

برای آشنایی بیشتر با این فریم‌ورک می‌تونید سری به سایت و مستنداتش بزنید تا دقیقا متوجه بشید که چی کار می‌تونید باهاش بکنید. خلاصه بخوام بگم به نظرم حتما نگاه کنید و به این راحتی از کنارش رد نشید چون قول میدم خیلی کمکتون می‌کنه و زمان خیلی زیادی رو براتون سیو می‌کنه. اگر توفیق باشه در مقاله‌های بعدی در مورد ویزگی‌های جالب‌تر و جدید‌تر این فریم‌ورک مثل jit ، arbitary values ، group ، peer و … صحبت می‌کنم.

منابع:

وبسایت tailwindcss

نویسنده مطلب: مهدی عقیقی

منبع مطلب