لقد اجتاحت Tailwind CSS عالم تطوير الويب؟️، ولكن لا تزال هناك مفاهيم خاطئة حول طبيعتها. أثناء مناقشة حديثة لتخطيط نظام التصميم، كدت أن أسقط الشاي ☕ (أنا لا أشرب القهوة، آسف) عندما قام أحد الزملاء بمقارنة Tailwind CSS بـ Bootstrap وMaterialize؟. كان هذا الاكتشاف الصادم بمثابة اكتشاف أن قطتي تعتقد أنها كلب! ؟؟

إذن، تناول الفشار؟ بينما أضع الأمور في نصابها الصحيح وأكشف النقاب عن الهوية الحقيقية لـ Tailwind CSS!

مقدمة صغيرة

في هذه المقالة، سنتعمق ?‍♂️ في معرفة ماهية Tailwind CSS حقًا، واستكشاف أسلوبها الفريد في التصميم ولماذا تتميز عن أطر عمل CSS التقليدية. في النهاية، ستفهم لماذا تشبه مقارنة Tailwind CSS مع Bootstrap أو أي أطر عمل أخرى قائمة على المكونات مقارنة التفاح بالبرتقال؟؟

ما ليس Tailwind CSS ❌

قبل أن نستكشف طبيعة Tailwind الحقيقية، دعونا نبدد بعض الخرافات:

• ليست مكتبة مكونات: على عكس Bootstrap أو Materialize، لا يوفر Tailwind CSS مكونات معدة مسبقًا خارج الصندوق؟
• ليس رأيًا في التصميم: ألا يفرض نمطًا مرئيًا محددًا على مشاريعك؟
• ليس مجرد إطار عمل CSS آخر: على الرغم من كونه إطار عمل CSS من الناحية الفنية، إلا أن منهج المنفعة أولاً يميزه عن الأطر التقليدية؟

وإليك بعض المفاهيم الخاطئة الشائعة:

• ؟ ""Tailwind CSS يشبه تمامًا الأنماط المضمنة": كلا، ليس كذلك. على عكس الأنماط المضمنة، يتيح لك Tailwind استخدام ميزات متقدمة مثل الفئات الزائفة واستعلامات الوسائط والرسوم المتحركة. يوفر أسلوب المنفعة أولاً الذي ينتج عنه عدد أقل من فئات CSS مقارنة بالتصميم المضمن
• ؟ "لا تحتاج إلى معرفة CSS لاستخدام Tailwind" : هذا خطأ. يعد الفهم القوي لـ CSS أمرًا بالغ الأهمية لاستخدام Tailwind CSS4 بشكل فعال. على الرغم من أنها تبسط العديد من جوانب التصميم، إلا أن معرفة أساسيات CSS تساعد في فهم كيفية عمل الفئات المساعدة وكيفية تخصيصها عند الحاجة
• ؟ "لا يمكن تخصيص Tailwind CSS": لا يمكن أن يكون هذا أبعد عن الحقيقة. في الواقع، تم تصميمه ليكون قابل للتوسعة والتخصيص بدرجة كبيرة

الآن بعد أن قمنا بتوضيح بعض المفاهيم الخاطئة، دعنا نستكشف ما الذي يجعل Tailwind CSS فريدًا حقًا ولماذا يحدث ثورة في الطريقة التي يتعامل بها المطورون مع تصميم الويب.

إطار عمل CSS المنفعة أولاً

في جوهره، يعد Tailwind CSS إطار عمل CSS أولًا للمنفعة. وهذا يعني أنه يوفر مجموعة من فئات المرافق ذات المستوى المنخفض التي يمكنك استخدامها لإنشاء تصميمات مخصصة مباشرة في HTML الخاص بك. بدلاً من كتابة CSS مخصص لكل عنصر، يمكنك تطبيق فئات محددة مسبقًا تتعامل مع خصائص تصميم محددة. إنه مثل امتلاك سكين الجيش السويسري؟ لـ CSS الخاص بك!

على سبيل المثال، بدلاً من كتابة:

.button {
  padding: 0.5rem 1rem;
  background-color: blue;
  color: white;
  border-radius: 0.25rem;
}

يمكنك استخدام فئات Tailwind في HTML الخاص بك:

Click me

نظام تصميم مقنع

على الرغم من أن Tailwind لا توفر مكونات مسبقة الصنع، إلا أنها توفر نظام تصميم شامل. يأتي مزودًا بمجموعة من القيم الافتراضية المصممة بعناية لـ الألوان والمسافات والطباعة والمزيد . هذه الإعدادات الافتراضية قابلة للتخصيص، مما يسمح لك بتخصيص Tailwind بما يتناسب مع احتياجات التصميم المحددة لمشروعك.

ألق نظرة على هذا التكوين المخصص:

// tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          light: '#4da6ff',
          DEFAULT: '#0066cc',
          dark: '#004080',
        },
        secondary: {
          light: '#ffb366',
          DEFAULT: '#ff8000',
          dark: '#cc6600',
        },
      },
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      },
      fontFamily: {
        sans: ['Roboto', 'Arial', 'sans-serif'],
        serif: ['Merriweather', 'Georgia', 'serif'],
      },
      fontSize: {
        'xs': '.75rem',
        'sm': '.875rem',
        'base': '1rem',
        'lg': '1.125rem',
        'xl': '1.25rem',
        '2xl': '1.5rem',
        '3xl': '1.875rem',
        '4xl': '2.25rem',
        '5xl': '3rem',
      },
      borderRadius: {
        'sm': '0.125rem',
        DEFAULT: '0.25rem',
        'md': '0.375rem',
        'lg': '0.5rem',
        'full': '9999px',
      },
    },
  },
  variants: {
    extend: {
      backgroundColor: ['active'],
      textColor: ['visited'],
    },
  },
}

لماذا تتميز Tailwind CSS عن بعضها البعض؟

المرونة والتخصيص

على عكس Bootstrap أو Materialize، اللذين يوفران مجموعة من المكونات التي تم تحديدها، يمنحك Tailwind العناصر الأساسية لإنشاء تصميماتك الفريدة. تسمح هذه المرونة بمزيد من الحرية الإبداعية وتساعد على تجنب "مظهر Bootstrap" الذي تقع فيه العديد من مواقع الويب.

فوائد الأداء

يمكن أن يؤدي نهج المنفعة أولاً إلى أحجام ملفات CSS أصغر، خاصة عند دمجها مع ميزة التطهير المضمنة. تعمل هذه الميزة على إزالة الأنماط غير المستخدمة في الإنتاج، مما ينتج عنه ورقة أنماط أصغر حجمًا وأكثر أداءً. سوف يشعر موقع الويب الخاص بك وكأنه على المنشطات! ?

مُحسّن تجربة المطور

يعمل على تحسين تجربة المطورين بشكل كبير من خلال:

• تقليل تبديل السياق: يمكنك تصميم العناصر دون مغادرة HTML الخاص بك. لا مزيد من شعوذة ملفات متعددة! ?‍♂️
• تعزيز الاتساق: تشجع الفئات المحددة مسبقًا على التباعد المتسق والألوان وعناصر التصميم الأخرى عبر مشروعك. سيكون تصميمك متناغمًا مثل الأوركسترا المتناغمة جيدًا؟
• تسريع التطوير: مع وجود فئات المرافق في متناول يدك، يمكنك إنشاء نماذج أولية وتكرار التصميمات بسرعة. ستشعر وكأن لديك قوى خارقة!⚡ ومع ملحق Tailwindcss Intellisense vscode، يمكنك الحصول على الإكمال التلقائي والفحص لفئاته والفئات المخصصة المضافة

وهذا التفاف؟

Tailwind CSS ليس مجرد إطار عمل CSS آخر. من خلال توفير مجموعة من فئات المرافق ذات المستوى المنخفض، فإنه يمكّن المطورين من إنشاء تصميمات فريدة وفعالة وقابلة للصيانة دون قيود أطر عمل CSS التقليدية.

لذلك في المرة القادمة التي يقارن فيها شخص ما Tailwind بـ Bootstrap، ستكون مستعدًا لشرح سبب فشل هذه المقارنة في تحقيق الهدف - ولماذا قد يكون Tailwind مجرد أداة تغيير قواعد اللعبة التي يحتاجها مشروعك. ترميز سعيد! ??‍?