Tailwind چه چیزی را تغییر می‌دهد؟
Tailwind مجموعه‌ای از ابزارهای CSS است که به شکل کلاس روی عناصر استفاده می‌شوند. به جای نوشتن نامی مثل card و تعریف همه ظاهر آن در یک فایل جدا، می‌توانید فاصله، رنگ و چیدمان را از کلاس‌ها بخوانید. فهم CSS همچنان لازم است: کلاس، مشکل اندازه یا ساختار اشتباه را خودبه‌خود حل نمی‌کند.
در این راهنما یک کارت را می‌خوانیم و درباره مرز کامپوننت تصمیم می‌گیریم. هدف حفظ‌کردن ده‌ها کلاس نیست؛ باید بتوانید تشخیص دهید هر کلاس کدام ویژگی CSS را کنترل می‌کند.
نصب را با نسخه جاری هماهنگ کنید
در مسیر رسمی فعلی برای Vite، بسته‌های tailwindcss و @tailwindcss/vite نصب و افزونه در تنظیمات Vite اضافه می‌شود. سپس CSS با @import "tailwindcss" وارد می‌شود. آموزش‌های نسخه‌های قدیمی ممکن است دستورها و فایل پیکربندی متفاوتی داشته باشند؛ نسخه پروژه را قبل از دنبال‌کردن آن‌ها ببینید.
کلاس‌ها را مثل تصمیم طراحی بخوانید
<article class="rounded-xl border border-slate-200 bg-white p-6">
<h2 class="text-xl font-semibold text-slate-900">آموزش وب</h2>
<p class="mt-3 leading-8 text-slate-600">یک قدم، یک مثال، یک تمرین.</p>
</article>p-6 فضای داخل، border مرز و rounded-xl گوشه را مشخص می‌کنند. mt-3 فاصله بالای پاراگراف و leading-8 فاصله خط‌ها را تعیین می‌کند. این مثال باید در پروژه‌ای اجرا شود که Tailwind آن را پردازش می‌کند؛ ویرایشگر عمومی HTML به‌تنهایی این کلاس‌ها را به CSS تبدیل نمی‌کند.
چه زمانی کامپوننت بسازیم؟
وقتی یک الگو با رفتار و ساختار مشترک تکرار می‌شود، مرز کامپوننت معنی دارد. دکمه یا کارت محصول می‌تواند ورودی‌هایی مثل عنوان و لینک بگیرد. اما جداکردن هر div به یک کامپوننت کوچک، الزاماً کد را بهتر نمی‌کند. قرارداد روشن و تعداد حالت‌های قابل فهم را حفظ کنید.
رنگ، اندازه، فوکوس، حالت غیرفعال و خطا را در سطح سیستم طراحی هماهنگ کنید. اگر هر صفحه کلاس‌ها و اندازه‌های تازه‌ای اختراع کند، استفاده از Tailwind جلوی ناهماهنگی را نمی‌گیرد.
برای ادامه
یک کارت را در دو اندازه صفحه و با عنوان طولانی آزمایش کنید. اگر برای درست‌شدنش به متن کوتاه وابسته‌اید، طراحی هنوز انعطاف کافی ندارد. سپس همان الگو را با داده متفاوت در چند جای پروژه استفاده کنید.