پیش‌نویس:Tailwind CSS

‏Tailwind CSS یک چارچوب CSS منبع باز است. ویژگی اصلی این کتابخانه این است که برخلاف سایر فریم ورک های CSS مانند Bootstrap، یک سری کلاس های از پیش تعریف شده برای عناصری مانند دکمه ها یا جداول ارائه نمی دهد. در عوض، فهرستی از کلاس‌های CSS «کاربردی» ایجاد می‌کند که می‌توانند برای استایل دادن به هر عنصر با ترکیب و تطبیق استفاده شوند.

Tailwind CSS یک چارچوب CSS است که به شما اجازه می‌دهد هر طرحی را مستقیماً در HTML خود با کلاس‌هایی مانند flex، pt-4، text-center و rotate-90 بسازید. این چارچوب با اسکن کردن فایل‌های HTML، جاوااسکریپت و سایر قالب‌ها برای نام کلاس‌ها، سبک‌های مربوطه را تولید می‌کند و آن‌ها را در یک فایل CSS استاتیک می‌نویسد. این روش سریع، انعطاف‌پذیر و قابل اعتماد است. برای نصب Tailwind CSS می‌توانید از ابزار Tailwind CLI یا PostCSS Framework استفاده کنید.

این چارچوب CSS با استفاده از روش utility-first به شما کمک می‌کند که از کلاس‌های از پیش تعریف شده برای ایجاد اجزای پیچیده استفاده کنید. شما می‌توانید با استفاده از responsive modifiers، dark mode modifier و conditional modifiers طرح‌هایی را بسازید که به هر اندازه‌ی صفحه‌نمایش و حالت تاریک واکنش نشان دهند. همچنین می‌توانید با استفاده از @tailwind directives در فایل CSS خود، لایه‌های مختلفی را اضافه کنید. برای مدیریت تکرار و ایجاد سبک‌های قابل استفاده مجدد، می‌توانید از @apply directive یا component classes استفاده کنید. برای سفارشی‌سازی رنگ‌ها، فونت‌ها، اندازه‌ها و سایر متغیرهای چارچوب، می‌توانید از tailwind استفاده کنید

به عنوان مثال، در سایر سیستم های سنتی، یک پیام هشدار کلاس وجود دارد که رنگ پس زمینه زرد و متن پررنگ را اعمال می کند. برای دستیابی به این نتیجه در Tailwind، باید مجموعه ای از کلاس های ایجاد شده توسط کتابخانه را اعمال کرد: bg-yellow-300 و font-bold.

از 30 جولای 2023، Tailwind CSS بیش از 70000 ستاره در GitHub دارد.

امکانات

با توجه به تفاوت مفاهیم اساسی در رابطه با سایر فریم ورک های سنتی CSS مانند Bootstrap، دانستن فلسفه ای که Tailwind از آن ساخته شد و همچنین کاربرد اساسی آن مهم است.

کلاس های کاربردی

مفهوم utility-first به ویژگی اصلی تمایز Tailwind اشاره دارد. به‌جای ایجاد کلاس‌ها در اطراف مؤلفه‌ها (دکمه، پانل، منو، جعبه متن ...)، کلاس‌ها حول یک عنصر سبک خاص (رنگ زرد، فونت پررنگ، متن بسیار بزرگ، عنصر مرکزی...) ساخته می‌شوند. به هر یک از این کلاس ها، کلاس های کاربردی می گویند.

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

انواع

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

واریانت ها دو بخش دارند: شرطی که باید برآورده شود و کلاسی که در صورت تحقق شرط اعمال می شود. به عنوان مثال، اگر اندازه صفحه بزرگتر از مقدار تعریف شده برای md باشد، نوع md:bg-yellow-400 کلاس bg-yellow-400 را اعمال می کند.

‏Tailwind CSS با استفاده از جاوا اسکریپت توسعه داده می شود، از طریق Node.js اجرا می شود و با مدیران بسته محیطی مانند npm یا yarn نصب می شود.

تنظیمات و تم ها

پیکربندی کلاس‌ها و انواع ابزاری که Tailwind ارائه می‌دهد از طریق یک فایل پیکربندی معمولاً به نام tailwind.config.js امکان‌پذیر است. در پیکربندی، می‌توان مقادیر کلاس‌های کاربردی، مانند پالت رنگ یا اندازه‌های بین عناصر را برای حاشیه‌ها تنظیم کرد.

همه را بسازید و پاکسازی کنید

حالت پیش فرض Tailwind این است که سیستم تمام ترکیبات CSS ممکن را بر اساس تنظیمات پروژه تولید می کند. سپس با استفاده از ابزار دیگری مانند PurgeCSS، تمام فایل‌ها پیمایش می‌شوند و کلاس‌هایی که استفاده نمی‌شوند از فایل CSS حاصل حذف می‌شوند.

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

حالت فقط در زمان > Erfan: حالت JIT (Just-In-Time) یک راه جایگزین برای تولید CSS است که به جای تولید همه کلاس‌های ممکن و سپس حذف تمام کلاس‌هایی که استفاده نمی‌شوند، محتوای فایل‌های HTML (یا پسوندها یا مکان‌های پیکربندی شده) را تجزیه می‌کند و فورا فقط کلاس هایی را تولید می کند که مورد نیاز و مورد استفاده قرار می گیرند.

از آنجایی که همه متغیرهای ممکن دیگر تولید نمی‌شوند، زمان انتظار و اندازه فایل‌های CSS به‌شدت کاهش می‌یابد. کلاس های کاربردی در حال پرواز با مقادیر دلخواه که در پیکربندی تنظیم نشده اند.

با شروع نسخه 3 Tailwind CSS، حالت JIT به حالت پیش فرض تبدیل شده است.