Tailwind CSS

Tailwind CSS یک فریم‌ورک CSS به روش utility-first است که صفحه را با کلاس‌های کوچک و تک‌منظوره‌ای که مستقیم در HTML نوشته می‌شوند استایل می‌دهد. کلاس‌هایی مثل p-4، text-center و bg-blue-500 هر کدام یک استایل را تنظیم می‌کنند. توسعه‌دهندگان با ترکیب این کلاس‌ها بدون نوشتن CSS سفارشی زیاد، هر طراحی را می‌سازند.

utility-first یعنی ساختن طراحی از کلاس‌های کوچک فراوانی که هر کدام یک کار انجام می‌دهند، به جای نوشتن یک کلاس سفارشی برای هر کامپوننت. یک دکمه ظاهرش را از کلاس‌های padding، رنگ، گردی گوشه و ضخامت فونت می‌گیرد. این رویکرد استایل‌ها را نزدیک markup نگه می‌دارد و از فایل‌های استایلی که مدام بزرگ می‌شوند جلوگیری می‌کند.

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

Tailwind CSS کلاس‌های کمکی سطح پایین برای ساخت طراحی سفارشی می‌دهد، در حالی که Bootstrap کامپوننت‌های آماده‌ای مثل navbar، کارت و مودال ارائه می‌کند. Bootstrap برای ظاهر استاندارد با کار طراحی کم سریع‌تر است. Tailwind CSS وقتی بهتر است که پروژه طراحی منحصربه‌فرد خودش را می‌خواهد، بدون درگیری با یک تم پیش‌فرض.

Tailwind CSS از طریق npm نصب و به ابزار build پروژه، مثل Vite، PostCSS یا Tailwind CLI، وصل می‌شود. در نسخه 4، پکیج را اضافه می‌کنید و سپس آن را با @import "tailwindcss" در ابتدای فایل CSS اصلی import می‌کنید. راهنمای رسمی نصب برای هر فریم‌ورک رایج، از جمله Laravel، Next.js و Vite، مراحل کوتاهی دارد.

Tailwind CSS برای مبتدی‌هایی که ویژگی‌های پایه CSS مثل margin، padding، flexbox و grid را می‌فهمند مناسب است. هر کلاس Tailwind به یک ویژگی واقعی CSS نگاشت می‌شود، پس یادگیری CSS در ابتدا خواندن کلاس‌ها را آسان می‌کند. مبتدی‌هایی که مبانی CSS را رد می‌کنند اغلب در رفع مشکل چیدمان‌ها با Tailwind CSS به زحمت می‌افتند.

بیشتر توسعه‌دهندگانی که CSS بلدند در چند روز با Tailwind CSS بهره‌ور می‌شوند. نام کلاس‌ها از الگوهای روشنی پیروی می‌کنند، پس یادگیری یک گروه کلاس به حدس زدن بقیه کمک می‌کند. تسلط بر حالت‌های واکنش‌گرا، تم‌های سفارشی و الگوهای کامپوننت چند هفته استفاده واقعی زمان می‌برد.

طراحی واکنش‌گرا در Tailwind CSS با افزودن پیشوندهای نقطه شکست مثل sm:، md: و lg: پیش از هر کلاس کمکی کار می‌کند. Tailwind CSS موبایل‌محور است، پس کلاس بدون پیشوند روی همه صفحه‌ها و کلاس پیشونددار از آن نقطه شکست به بالا اعمال می‌شود. برای مثال text-sm md:text-lg متن کوچک در گوشی و متن بزرگ‌تر در صفحه‌های عریض‌تر می‌دهد.

نقاط شکست پیش‌فرض Tailwind CSS عبارت‌اند از sm در 640 پیکسل، md در 768 پیکسل، lg در 1024 پیکسل، xl در 1280 پیکسل و 2xl در 1536 پیکسل. هر نقطه شکست یک حداقل عرض است که با رویکرد موبایل‌محور Tailwind جور است. هر پروژه می‌تواند این مقدارها را در تنظیمات تم تغییر دهد یا نقطه شکست جدید اضافه کند.

حالت تاریک را در Tailwind CSS با گذاشتن پیشوند dark: پیش از هر کلاس، مثل dark:bg-gray-900، اضافه می‌کنید. به طور پیش‌فرض Tailwind CSS از تنظیم سیستم‌عامل بازدیدکننده پیروی می‌کند. برای اینکه کاربر با یک دکمه حالت تاریک را عوض کند، variant تاریک را طوری تنظیم می‌کنید که به یک کلاس یا ویژگی data روی صفحه وابسته باشد.

در نسخه 4 Tailwind CSS، رنگ‌ها و فونت‌ها را با متغیرهای CSS داخل بلوک @theme در فایل CSS اصلی سفارشی می‌کنید. متغیری مثل --color-brand خودکار کلاس‌هایی مثل bg-brand و text-brand می‌سازد. نسخه‌های قدیمی‌تر برای همین کار از فایل tailwind.config.js استفاده می‌کردند و این روش در نسخه 4 هم از طریق یک گزینه سازگاری کار می‌کند.

Tailwind CSS می‌تواند HTML را شلوغ نشان دهد، چون یک عنصر ممکن است کلاس‌های زیادی داشته باشد. بیشتر تیم‌ها این مشکل را با تبدیل الگوهای تکراری به کامپوننت در فریم‌ورکشان، مثل کامپوننت Blade، React یا Vue، حل می‌کنند. در عوض، استایل‌ها کنار markup قابل دیدن می‌مانند و تغییرات سریع و امن می‌شوند.

Tailwind CSS با اسکن فایل‌های پروژه و تولید فقط کلاس‌هایی که واقعاً استفاده شده‌اند، فایل CSS را کوچک نگه می‌دارد. کلاس‌های استفاده‌نشده هرگز به فایل استایل نهایی نمی‌رسند. فایل CSS نهایی‌ای که با Tailwind CSS ساخته می‌شود حتی برای سایت‌های بزرگ هم معمولاً کوچک است.

دستور @apply در Tailwind CSS اجازه می‌دهد کلاس‌های کمکی Tailwind را داخل قوانین CSS خودتان استفاده کنید. این دستور برای استایل دادن به محتوایی که کنترلش دست شما نیست، مثل HTML تولیدشده توسط ویرایشگر متن، مفید است. تیم Tailwind توصیه می‌کند کم از آن استفاده شود، چون کامپوننت‌ها معمولاً راه تمیزتری برای استفاده دوباره از استایل‌ها هستند.

بله، Tailwind CSS با Laravel به خوبی کار می‌کند و پروژه‌های جدید Laravel از قبل برای استفاده از آن همراه Vite تنظیم شده‌اند. کلاس‌های Tailwind را در قالب‌های Blade می‌نویسید و Vite فایل CSS نهایی را می‌سازد. starter kitهای Laravel هم برای صفحه‌های ورود و داشبورد از Tailwind CSS استفاده می‌کنند.

بله، Tailwind CSS با React، Vue، Svelte و بیشتر فریم‌ورک‌های دیگر JavaScript کار می‌کند. کلاس‌ها در React از طریق className و در Vue از طریق class در markup کامپوننت قرار می‌گیرند. چون هر کامپوننت کلاس‌های خودش را نگه می‌دارد، Tailwind CSS با فریم‌ورک‌های کامپوننت‌محور به خوبی جور است.

Tailwind CSS اثر مستقیمی روی رتبه جستجو ندارد، اما با کوچک نگه داشتن فایل CSS و سریع کردن صفحه‌ها به طور غیرمستقیم به سئو کمک می‌کند. سرعت صفحه بخشی از سیگنال‌های تجربه صفحه در Google است. محتوا، ساختار صفحه و معناداری HTML همچنان خیلی مهم‌تر از ابزار استایل‌دهی هستند.

مقدارهای دلخواه در Tailwind CSS اجازه می‌دهند مقدار دقیقی را که در تم نیست با نوشتن داخل کروشه استفاده کنید. برای مثال w-[37%] یا top-[117px] همان لحظه کلاسی برای آن مقدار دقیق می‌سازد. مقدارهای دلخواه برای موارد یک‌باره مفیدند، اما مقداری که زیاد استفاده می‌شود جایش در تم است.

حالت‌های hover و focus در Tailwind CSS با افزودن پیشوند حالتی مثل hover:، focus: یا active: پیش از کلاس کمکی کار می‌کنند. برای مثال bg-blue-500 hover:bg-blue-600 دکمه را وقتی نشانگر ماوس رویش است تیره‌تر می‌کند. پیشوندها را می‌توان با نقاط شکست و حالت تاریک ترکیب کرد، مثل md:hover:underline.

نه، خود Tailwind CSS فقط کلاس‌های کمکی دارد، نه کامپوننت‌های آماده مثل مودال یا navbar. کامپوننت‌های آماده از مجموعه‌های جداگانه می‌آیند، مثل Tailwind Plus رسمی یا کتابخانه‌های جامعه کاربری مثل daisyUI و Flowbite. بسیاری از تیم‌ها مجموعه کامپوننت کوچک خودشان را روی کلاس‌های کمکی می‌سازند.

بله، Tailwind CSS از طریق variantهای rtl: و ltr: و کلاس‌های کمکی منطقی از چیدمان راست‌به‌چپ پشتیبانی می‌کند. کلاس‌های منطقی مثل ms-4 و pe-2 فاصله را در ابتدا یا انتهای خط تنظیم می‌کنند، پس در فارسی و عربی خودکار برعکس می‌شوند. این کار باعث می‌شود یک markup واحد برای صفحه‌های انگلیسی و فارسی یا عربی کار کند.

Tailwind CSS نسخه 4 پیکربندی را با بلوک @theme و یک خط @import به داخل CSS منتقل کرد. نسخه 4 همچنین موتور build سریع‌تر، تشخیص خودکار فایل‌های محتوا و قابلیت‌های مدرن CSS مثل cascade layers را آورد. بیشتر پروژه‌هایی که از نسخه 3 ارتقا می‌دهند می‌توانند از ابزار رسمی ارتقا برای به‌روز کردن کدشان استفاده کنند.

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

کلاس‌های Tailwind CSS را با تبدیل الگوهای تکراری به کامپوننت و مرتب کردن کلاس‌ها با یک ترتیب ثابت منظم نگه دارید. افزونه رسمی Prettier برای Tailwind CSS کلاس‌ها را هنگام ذخیره خودکار مرتب می‌کند. تعریف رنگ‌های برند و فاصله‌ها در تم هم کلاس‌ها را کوتاه و یکدست نگه می‌دارد.

بله، Tailwind CSS متن‌باز و با مجوز MIT است، پس در پروژه‌های شخصی و تجاری قابل استفاده است. این مجوز استفاده، تغییر و عرضه Tailwind CSS در هر محصولی را مجاز می‌کند. کد منبع آن روی GitHub عمومی است و هر کسی می‌تواند آن را بخواند و مشکلات را گزارش کند.