آیا باید از Tailwind استفاده کنم؟ 5 چیز برای در نظر گرفتن – تجربه واقعی [2024]

Summarize this content to 400 words in Persian Lang
هی، DEV.to جامعه! در این پست، من از شما دعوت می‌کنم تا در مورد اینکه آیا Tailwind CSS گزینه مناسبی برای استایل‌سازی در پروژه‌های در هر مقیاسی است، بحث کنید.

ما هنگام ساخت رزومه و quintCV سازنده رزومه خود از Tailwind به طور گسترده استفاده کرده ایم. اکنون مایلیم تجربیات خود را با جامعه به اشتراک بگذاریم.

ما در مورد جنبه های مثبت 👍، جنبه های منفی 👎، و مواردی که باید در نظر بگیرید صحبت خواهیم کرد.

بیایید شروع کنیم!

تازه‌سازی سریع – Tailwind چیست؟

طبق وب سایت Tailwind CSS، Tailwind CSS است

… یک فریم ورک CSS اولین ابزار پر شده با کلاس هایی مانند flex, pt-4, text-center و rotate-90 که می تواند برای ساخت هر طرحی، مستقیماً در نشانه گذاری شما ساخته شود.

یعنی ما قادر به نوشتن هستیم

…

و دریافت کنید div عنصر با flexbox بدون نوشتن هیچ CSS با دست. این مثال به اولین نکته ما منتهی می شود!

1. 👍 با تمرکز بر طرح بندی در زمان صرفه جویی کنید

وقتی زمان مهم است، Tailwind واقعاً به شما کمک می کند تا به جلو بروید. در مقایسه با حفظ یک راه حل CSS، می توانید نمونه اولیه و سریعتر نتایج قابل مشاهده را دریافت کنید.

Tailwind همچنین به افراد مبتدی کمک می کند تا توسعه frontend را انتخاب کنند.

تجربه ما

هنگام توسعه quintCV، اغلب باید ایده های مختلف طراحی یا چیدمان را امتحان کنیم. از آنجایی که ما یک تیم کوچک هستیم، منابع محدود است، در حالی که زمان ارزشمند است. Tailwind ما را قادر ساخت که رابط های کاربری زیبا ایجاد کنیم و ایده های خود را سریعتر در این زمینه آزمایش کنیم.

2. 👎 باد دنباله، کنترل دقیق را سخت‌تر می‌کند، اما غیرممکن نیست.

با یک سیستم از کلاس های از پیش تعریف شده مانند Tailwind، شما باید از اصطلاحا استفاده کنید مقادیر دلخواه برای اینکه کنترل دقیق تری بر استایل های خود داشته باشید، مانند این: leading-[normal]

راه دیگر برای به دست آوردن این، نوشتن CSS سفارشی یا حتی سبک های درون خطی است.

مثال: اگر می خواهید یک تصویر به عنوان پس زمینه داشته باشید، باید بنویسید bg-[url(‘/background.jpg’)] در ویژگی کلاس یک عنصر، که در صورت طولانی‌تر شدن مسیرهای فایل، به سرعت غیرقابل خواندن می‌شود.

مثال شماره 2: یک سیستم طراحی در TailwindCSS وجود دارد که، در میان چیزهای دیگر، کلاس هایی را برای حاشیه ها با مقادیر ثابت ارائه می دهد، به عنوان مثال، mt-1 یا m-6. با این حال، از آنجا که آن است یک سیستم نظری، وجود ندارد m-18 کلاس

شما باید خود را در فایل پیکربندی تعریف کنید یا از یک مقدار دلخواه مانند استفاده کنید m-[4.5rem]. البته، این مثال ممکن است خیلی خاص باشد، اما طراحان همه ما نیازهای متفاوتی داریم

تجربه ما

ما تمام تلاش خود را می کنیم تا عملگرا بمانیم و سبک های درون خطی و CSS دست نویس را با کلاس های Tailwind در مکان هایی که منطقی تر است ترکیب می کنیم. به عنوان مثال، زمانی که تعدادی انیمیشن CSS را در صفحه اصلی ویرایشگر خود اضافه می کنیم، یک کلاس CSS سفارشی تعریف کرده ایم.

3. 👍 Tailwind حفظ ثبات در سراسر پروژه را آسان می کند

در قسمت قبل به طور مختصر به سیستم طراحی اشاره کردیم. این سیستم از کلاس های کاربردی با فاصله های از پیش تعریف شده تشکیل شده است (به عنوان مثال، mt-2 یا gap-x-3). افراد حاضر در Tailwind این سیستم را ایجاد کردند تا به افراد کمک کند تا بدون تلاش اضافی، رابط‌های کاربری ثابت بسازند.

به هر حال، کاملاً سفت و سخت نیست. مقادیر فاصله (مثلاً 2 اینچ mt-2) همچنین در فایل پیکربندی Tailwind قابل تنظیم هستند.

سیستم طراحی همچنین طرح های رنگی از پیش تعریف شده را ارائه می دهد. با استفاده از کلاس هایی مانند از آنها بهره مند شوید bg-slate-100 یا text-red-800. پیکربندی شما ممکن است رنگ‌هایی مانند این را نیز تعریف کند primary، و آزمایشات را با طرح های رنگی ساده کنید.

ابزارهای آنلاینی وجود دارد که تولید طرح رنگی سازگار با Tailwind را به یک کار آسان تبدیل می کند. ما از این ابزار استفاده کرده ایم. (سلب مسئولیت: ما به سازندگان این ابزار وابسته نیستیم).

تجربه ما

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

انعطاف پذیری داشتن یک primary رنگ به ما این امکان را می دهد که چندین تغییر طرح رنگ را به طور یکپارچه انجام دهیم.

prose کلاس از پلاگین رسمی تایپوگرافی مقاله شاخص ما را ساخته است یک قطعه محتوای خوب قالب بندی شده فورا.

4. 👎 گاهی اوقات، خیلی شبیه استایل های درون خطی است

یک صفحه HTML را تصور کنید که در آن فقط از سبک های درون خطی استفاده می کنید: بدون کلاس، بدون شناسه عنصر، بدون سازگاری. فقط کدهایی که دارای ویژگی های طولانی CSS هستند. خوب، گاهی اوقات شما نیاز به استفاده از کلاس های Tailwind زیادی دارید که بیشتر و بیشتر شبیه جهنم یک ظاهر طراحی داخلی است.

به عنوان مثال، ممکن است به یک ردیف flexbox نیاز داشته باشید div عنصر با فاصله بین عناصر فرزند:

…

(توجه: پس زمینه خاکستری برای دید اضافه شده است.)

گام بعدی این است که مطمئن شوید این ظرف در دستگاه‌های کوچک نیز خوب به نظر می‌رسد – اگر صفحه نمایش کوچک است، آن را یک ستون کنید:

…

sm: پیشوند برای اعمال یک کلاس کاربردی با استفاده می شود min-width: 640px پرس و جو رسانه ای

برای برجسته کردن آن، اجازه دهید مقداری رنگ پس‌زمینه، گرد کردن و یک سایه اضافه کنیم:

…

حالا بیایید مقداری بالشتک اضافه کنیم (p-3) به کانتینر برای دادن فضایی به عناصر در اطراف آنها:

…

به عنوان آخرین لمس، اجازه دهید مقداری فضای تنفسی بین عناصر کودک اضافه کنیم (gap-y-3 sm:gap-x-3) به طوری که وقتی فضای کافی به صورت افقی وجود ندارد، یا زمانی که روی صفحه نمایش های کوچک قرار دارید، خیلی نزدیک نباشند:

…

خط حاصل بسیار طولانی است، اینطور نیست؟ حالا تصور کنید اگر مجبور بودیم یک عنصر فرزند با پیچیدگی مشابه اضافه کنیم!

ممکن است کسی استدلال کند که تجزیه “مناسب” به اجزای کوچکتر ممکن است به شما در کاهش این مشکل کمک کند. با این حال، ما این را محدودیت ذاتی رویکرد Tailwind می‌دانیم.

تجربه ما

این چیزی است که ما اخیراً شروع به توجه به آن کرده ایم. با یک پروژه رو به رشد، تأثیر بر خوانایی کد منبع و کامپایل شده بسیار زیاد می شود. زمانی که در حال جستجوی ابزار DevTools هستید در حالی که سعی می کنید منبع یک اشکال را کشف کنید، پرش به یک مکان خاص در کد دشوارتر می شود.

از طرف دیگر، می توانید کد خود را بر اساس یک کلاس خاص جستجو کنید toolbar-button. با رویکرد کلاس ابزار Tailwind، این کار کاملاً ساده نیست.

🤔 TailwindCSS به عنوان یک جایگزین CSS عمل می کند

بر خلاف ابزارهایی مانند SCSS/LESS که CSS را گسترش می‌دهند، TailwindCSS یک «سینتکس» کاملاً جایگزین ارائه می‌کند. مانند هر ابزار جایگزین، همیشه این خطر وجود دارد که بیش از حد به موارد خاص وابسته شود. این خطر با سطح تجربه توسعه دهنده متفاوت است.

مبتدیان ممکن است نگران باشند که بهتر است وقت خود را صرف یادگیری درست کنند display: flexes به جای flex flex-rowس خبر خوب این است که مهارت هایی که با Tailwind یاد می گیرید به CSS معمولی قابل انتقال هستند. Tailwind چیزی به CSS معمولی اضافه نمی کند، فقط استفاده از آن را کمی راحت تر می کند.

تجربه ما

یکی از توسعه دهندگان ما، که در اوایل کار خود مجبور شد پس از تغییر به بک اند از فول استک به مسائل فرانت اند نگاه کند، می گوید که پس از توسعه با Tailwind با مهارت های CSS وانیلی خود اعتماد به نفس بیشتری پیدا کرده است.

ما فکر می کنیم که هرگز نباید خود را محدود کرد و در عوض با Tailwind به عنوان ابزاری که برای دسترسی بیشتر به CSS ساخته شده است، برخورد کرد، اما نه برای جایگزینی CSS به طور کلی.

آیا باید از Tailwind استفاده کرد؟

پاسخ کوتاه – بستگی دارد. پاسخ طولانی تر؟

اگر شما یک مهندس باتجربه با دسترسی به یک سیستم طراحی مستقر هستید، ممکن است مزایای زیادی از کلاس های ابزار Tailwind نبینید. امیدواریم موضوعاتی که در این مقاله مطرح کردیم به شما کمک کند تا همه جوانب مثبت و منفی را بسنجید و تصمیمی آگاهانه بگیرید.

اگر

شما یک مهندس بی تجربه هستید یا مهارت های CSS شما کاملا زنگ زده است
شما در زمان بسیار محدود هستید
شما یک سیستم طراحی ثابت ندارید و ترجیح می دهید از چیزی آماده استفاده کنید
شما احساس می کنید که Tailwind تعادل مناسبی را برای شما ایجاد می کند

سپس آن را امتحان کنید و خودتان ببینید.

❤ دوست داشتنی ترین ویژگی Tailwind ما: اصول سیستم طراحی🙅‍♂️ کمترین عارضه جانبی ما: جهنم کلاس ابزار.

آیا قبلاً از Tailwind استفاده می کنید؟ داستان خود را به اشتراک بگذارید

ما در quintCV خوشحالیم که داستان خود را به اشتراک می گذاریم. Tailwind به ما این امکان را داد که یک رابط کاربری زیبا و ثابت برای سازنده رزومه و CV خود بسازیم. امیدواریم تجربه ای که در این مقاله به اشتراک گذاشتیم به شما کمک کند تا پاسخ دهید آیا باید از Tailwind استفاده کنید یا خیر.

آیا از Tailwind استفاده می کنید؟ آیا ترجیح می دهید از CSS ساده استفاده کنید؟ بحث کنیم!