‏۵ عادت که نمی‌ذاره Tailwind CSS بهم بریزه

تو مقالهٔ Evil Martians اومده که Tailwind تا وقتی پروژه کوچیکه لذت‌بخشه، ولی همون سرعت اولیه بعداً به لیست‌های طولانی کلاس و مقدارهای جادویی مثل p-[123px] ختم می‌شه و یه روز دیگه کد خودتم برات ناآشناست. به گفتهٔ نویسنده‌ها قبل از هر تمرینی، پروژه باید دو تا شرط رو داشته باشه: یه دیزاین‌سیستم واقعی و یه رویکرد کامپوننتی. اگه هیچ‌کدوم رو نداری، Tailwind کار رو سخت‌تر می‌کنه نه راحت‌تر.

شرط اول یعنی رنگ و فاصله و بریک‌پوینت به‌شکل توکن تعریف بشن، نه اینکه یه مقدار خام تو چند جا تکرار شه. تو Tailwind v4 این کار مستقیم تو CSS با دستور @theme انجام می‌شه و تو v3 با tailwind.config.js:

@theme {
  --color-primary: oklch(45% 0.2 270);
}

بعدش هرجا لازم شد bg-primary یا text-primary رو می‌نویسی و عوض کردن رنگ کل پروژه فقط یه جا انجام می‌شه.

شرط دوم رویکرد کامپوننتیه: چون کلاس‌ها مستقیم رو المان می‌شینن، بدون کامپوننت مارک‌آپ شلوغ و تکراری می‌شه. نویسنده‌ها هشدار می‌دن که از دستور @apply هم فاصله بگیری؛ ظاهر کد تمیزتر می‌شه ولی مزیت اصلی Tailwind یعنی ایزوله موندن استایل‌ها رو از بین می‌بره و حجم CSS رو بالا می‌بره. تو v4 استفاده ازش تو یه استایل‌شیت جدا به @reference هم نیاز داره.

از پنج تمرین، سه تای اول دربارهٔ خوانایی‌ان: کلاس کمتر بنویس (py-4 به‌جای pt-4 pb-4، یا border-black/50 به‌جای زنجیره‌ای از کلاس‌های بوردر)؛ توکن‌ها رو گروه‌بندی و معنایی نام‌گذاری کن — یعنی به‌جای کپی کردن bright-red از فیگما، بذارش تو بخش رنگ‌ها با اسم error؛ و ترتیب کلاس‌ها رو ثابت نگه دار، که به گفتهٔ نویسنده‌ها بهتره با پلاگین رسمی Prettier خودکار بشه تا دستی.

تمرین چهارم دربارهٔ override کردنه: پاس دادن کلاس دلخواه با prop باعث می‌شه یه کامپوننت تو هر صفحه یه شکل دربیاد. راه‌حل پیشنهادی، تعریف یه مجموعه وریانت مشخصه:

const BUTTON_VARIANTS = {
  primary: "bg-blue-500 hover:bg-blue-600 text-white",
  secondary: "bg-gray-500 hover:bg-gray-600 text-white",
  danger: "bg-red-500 hover:bg-red-600 text-white",
};

بعد کامپوننت یه prop به اسم variant می‌گیره و کلاس نهایی با clsx ساخته می‌شه. اگه وریانت به کارت نیومد، tailwind-merge هست ولی نویسنده‌ها می‌گن با احتیاط، چون سبک نیست و حجم باندل رو بیشتر می‌کنه.

تمرین آخر حجم بیلده: تو Tailwind v4 مینیفای خودکاره چون روی Lightning CSS ساخته شده و پارس، وندور-پریفیکس و مینیفای رو یک‌جا انجام می‌ده؛ تو v3 خودت باید با فلگ --minify تو CLI یا با cssnano تنظیمش کنی.

نکات کلیدی:

• بدون دیزاین‌سیستم و کامپوننت، Tailwind به‌جای کمک، دردسر می‌شه
• توکن‌ها رو با @theme (v4) یا tailwind.config.js (v3) یه جا تعریف کن
• از @apply دوری کن؛ ایزوله بودن استایل رو از بین می‌بره و CSS رو سنگین می‌کنه
• کلاس کمتر بنویس و ترتیبشون رو با پلاگین Prettier خودکار کن
• به‌جای پاس دادن کلاس دلخواه، وریانت‌های از پیش تعریف‌شده بساز
• مینیفای تو v4 خودکاره، تو v3 با --minify یا cssnano