‏چرا از Tailwind فاصله گرفتم و چی یاد گرفتم؟

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

اولین درس بزرگ؟ Tailwind بی‌سروصدا خیلی چیزها یاد داده. مثلاً CSS ریست (از جمله box-sizing: border-box روی همه المان‌ها)، پالت رنگ منسجم، و مقیاس فونت استاندارد — همه اینا از Tailwind اومده و نویسنده تصمیم گرفته همون سیستم‌ها رو این بار با CSS variables خودش بسازه.

ساختار CSS جدیدش به چند بخش تقسیم می‌شه: ریست، کامپوننت‌ها، رنگ‌ها، اندازه فونت، کلاس‌های utility، استایل‌های پایه، فاصله‌گذاری، طراحی ریسپانسیو و سیستم بیلد. مهم‌ترین بخش «کامپوننت‌ها»ست — هر بخش از UI یه کلاس یکتا داره، فایل CSS مجزا داره، و CSS هیچ کامپوننتی نباید روی کامپوننت دیگه‌ای تأثیر بذاره.

برای رنگ‌ها و فونت‌ها، از CSS variables استفاده می‌کنه. به‌جای یادآوری اینکه از px استفاده کنه یا rem، کافیه بنویسه:

h3 {
  font-size: var(--size-lg);
  line-height: var(--line-height-lg);
}

یکی از جالب‌ترین تغییرات اینه که به‌جای media query زیاد، از CSS Grid انعطاف‌پذیر استفاده می‌کنه. مثلاً با auto-fit می‌شه بدون هیچ breakpoint‌ای روی صفحه بزرگ ۲ ستون و روی موبایل ۱ ستون داشت:

display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), max-content));
justify-content: center;

برای سیستم بیلد هم از esbuild استفاده می‌کنه — ابزاری سبک که CSS و فونت‌ها رو باندل می‌کنه. در محیط توسعه اصلاً نیازی بهش نیست چون مرورگرهای مدرن هم @import و هم nested selectors رو به‌صورت native پشتیبانی می‌کنن.

یه دلیل مهم دیگه هم هست: نویسنده معتقده Tailwind به‌نوعی ارزش مهارت CSS رو کم می‌کنه و ترجیح می‌ده با یادگیری جدی‌تر CSS، به این تخصص احترام بذاره — به‌خصوص در دوره‌ای که LLMها اهمیت مهارت انسانی رو زیر سؤال می‌برن.

نکات کلیدی:

• Tailwind ناخواسته سیستم‌های خوبی (ریست، رنگ، فونت) رو معرفی می‌کنه که می‌شه مستقل ازش هم داشت
• ساختار کامپوننت‌محور (هر UI بخش = یه فایل CSS) کد رو خیلی قابل نگهداری‌تر می‌کنه
• CSS Grid با auto-fit می‌تونه بدون media query طراحی ریسپانسیو بسازه
• CSS variables جایگزین خوبی برای utility classهای Tailwind هستن
• esbuild برای باندل CSS در پروداکشن کافیه و نیازی به زیرساخت پیچیده نیست