لما بدأت أتعلم CSS، كنت كتبت كل حاجة بالطريقة التقليدية: أسماء كلاسات معبرة، ملفات CSS منفصلة، وكل كلاس ليه خصائص محددة. كنت حاسس إن ده الطريقة الصح والأكثر تنظيمًا. بس مع كبر المشاريع، لقيت نفسي بتكتب CSS أكتر من الكود نفسه.Tailwind CSS غيّر الطريقة دي تمامًا، وفي المقال ده هقولك إزاي وليه.
أول حاجة لاحظتها مع Tailwind كانت السرعة. بدل ما أفتح ملف CSS وأكتب كلاس جديد وأروح أضيفه في HTML، بقيت أكتب كل حاجة في مكان واحد. في إسمع راديو، الصفحة الرئيسية كانت محتاجة تصميم معقد: بطاقات محطات، مشغل صوت، قسم قرآن. بالـ CSS التقليدي كان هاخد يومين بس في التنسيق. مع Tailwind خلصت في نص يوم.
المقارنة بين Tailwind وCSS التقليدي مش مجرد مسألة تفضيل شخصي. في CSS التقليدي، كل مرة بتكتب كلاس جديد بيزيد حجم الملف، وبتحصل تكرار كتير. في Tailwind، الأدوات (Utilities) بتتُعاد استخدامها في كل مكان، والـ PurgeCSS بيحذف اللي مش مستخدم. النتيجة: ملف CSS أصغر بكثير. في مشروع المخبر، ملف CSS النهائي كان أقل من 10KB مقارنة بـ 50KB بالطريقة التقليدية.
التخصيص (Customization) في Tailwind كان نقطة تحول. ملف tailwind.config بيخليك تتحكم في كل حاجة: الألوان، المسافات، الخطوط، نقاط التوقف. في تطبيق طمني، عرفت أضيف لون براند خاص (أخضر للأمان) وأستخدمه في كل مكان بسهولة. لو حبيت أغيره، بغيره في مكان واحد بس. ده مستحيل تقريبًا بالـ CSS التقليدي من غير preprocessors زي SASS.
التصميم المتجاوب (Responsive Design) مع Tailwind تجربة مختلفة تمامًا. بدل ما أكتب media queries منفصلة، بكتب البادئة مباشرة: sm:, md:, lg:, xl:. في إسمع راديو، بطاقات المحطات بتظهر عمودين على الموبايل وتلاتة على التابلت وأربعة على الكمبيوتر. الكود ده بيكون واضح ومقروء في مكان واحد: grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4.
الوضع الداكن (Dark Mode) مع Tailwind بسيط جدًا. بادئة dark: قبل أي أداة بتخليها تتنفذ في الوضع الداكن بس. في تطبيق الطقس، الوضع الداكن كان مطلب أساسي عشان التطبيق بيستخدمه الناس في أوقات مختلفة من اليوم. كل اللي عملته إني أضفت dark: قبل الألوان والخلفيات وخلصت. بالـ CSS التقليدي، كنت محتاج أكتب media query منفصلة لكل عنصر.
أكبر نقد بيتقال عن Tailwind هو إن HTML بيكون مليان كلاسات وبيبقى صعب القراءة. وده صحيح في البداية. بس مع الوقت بتتعلم تنظم الكلاسات: الأول الأساسيات (display, position)، بعدين الأبعاد (width, height, padding)، بعدين الألوان والحدود، وفي الآخر التفاعلات (hover, focus). كمان استخراج المكونات (Component Extraction) بيحل المشكلة دي — لما عنصر بيتكرر، بتعمله مكون منفصل.
مثال حقيقي من معركة الأسئلة: كرت السؤال كان بيتكرر في كل جولة. بدل ما أكتب الكلاسات كل مرة، عملت مكون QuestionCard واستخدمته في كل مكان. الكلاسات الطويلة بقت في مكان واحد بس، والاستخدام بقي نظيف ومقروء.
نصيحتي: لو لسه ما جربت Tailwind، ابدأ بمشروع صغير. هتزعل في الأول من شكل الكود، بس بعد أسبوع هتلاقي نفسك أسرع بكتير. واستخدم VS Code Extension بتاع Tailwind عشان الـ autocomplete — ده بيغيّر حياتك. وأهم حاجة: اتعلم تنظيم الكلاسات عشان الكود يفضل مقروء.