دليل مستخدم Bootstrap للبدء في استخدام Tailwind CSS

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

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

؟ لماذا Tailwind CSS؟

قبل الانتقال إلى البرنامج التعليمي، إليك مقارنة سريعة بين Bootstrap وTailwind:

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

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

1. إعداد الريح الخلفية في المشروع

الخطوة 1: تثبيت Tailwind CSS

للبدء في استخدام Tailwind CSS، ستحتاج إلى تثبيته في مشروعك. اتبع الخطوات التالية:

• تثبيت Tailwind عبر npm:

  npm install -D tailwindcss postcss autoprefixer
  npx tailwindcss init

• في ملف tailwind.config.js، قم بإعداد مصفوفة المحتوى للتأكد من قيام Tailwind بفحص مشروعك بحثًا عن الفئات:

  module.exports = {
    content: [
      './public/**/*.html',
      './src/**/*.{html,js}',
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }

الخطوة 2: إنشاء ملف CSS الخاص بك

الآن، قم بإنشاء ملف style.css في مشروعك باستخدام توجيهات Tailwind التالية:

@tailwind base;
@tailwind components;
@tailwind utilities;

الخطوة 3: قم بتضمين Tailwind في HTML الخاص بك

في ملفات HTML الخاصة بك، قم بربط ملف CSS الذي تم إنشاؤه:

أنت الآن جاهز لبدء استخدام Tailwind في مشروعك!

2. فهم فلسفة الرياح الخلفية

إذا كنت معتادًا على فئات Bootstrap مثل .container و.row و.col-6، فقد يبدو التبديل إلى Tailwind بمثابة تغيير كبير. في Bootstrap، يتم تلخيص قرارات التخطيط والتصميم في مكونات، بينما في Tailwind، يمكنك التحكم الكامل في التصميم باستخدام فئات الأدوات المساعدة.

مثال: إنشاء تخطيط الشبكة

التمهيد:

  

    
Column 1
    
Column 2
  

الريح الخلفية:

  
Column 1
  
Column 2

في Tailwind، تحل فئات الشبكة وgrid-cols-2 محل نظام الصفوف والأعمدة في Bootstrap. تضيف فئة الفجوة 4 المسافات بين عناصر الشبكة، ويمكنك ضبط كل شيء حسب الحاجة عن طريق تعديل فئات الأدوات المساعدة.

3. الطباعة والتباعد مع الريح الخلفية

أحد الاختلافات الرئيسية بين Bootstrap وTailwind هو كيفية التعامل مع الطباعة والتباعد.

مثال: إضافة الطباعة والحشو

التمهيد:

Hello, Bootstrap!
This is a lead paragraph.
Click Me

الريح الخلفية:

Hello, Tailwind!
This is a lead paragraph.
Click Me

في Tailwind، لا توجد أزرار أو أنماط عناوين محددة مسبقًا. بدلاً من ذلك، يمكنك تطبيق الفئات المساعدة مباشرةً (text-4xl، وbg-blue-500، وpx-4، وما إلى ذلك) لإنشاء تصميمك بالطريقة التي تريدها تمامًا.

4. التصميم سريع الاستجابة

أحد الأشياء التي يحبها مستخدمو Bootstrap هو نظام الشبكة سريع الاستجابة. يحتوي Tailwind أيضًا على أدوات مساعدة رائعة سريعة الاستجابة، ولكن بدلاً من الاعتماد على نقاط التوقف المحددة مسبقًا، يمكنك التحكم في الأنماط لأحجام الشاشات المختلفة باستخدام بادئات Tailwind سريعة الاستجابة.

مثال: جعل العنصر مستجيبًا

التمهيد:

Responsive Column

الريح الخلفية:

Responsive Column

في Tailwind، يضمن w-full أن العنصر يأخذ العرض الكامل على الشاشات الصغيرة، ويطبق md:w-1/2 العرض بنسبة 50% بدءًا من نقطة التوقف md (حجم الشاشة المتوسط).

5. تخصيص الريح الخلفية

تمامًا مثلما قمت بتخصيص متغيرات Bootstrap، يمكنك توسيع فئات الأدوات المساعدة لـ Tailwind أو إنشاء نظام التصميم المخصص الخاص بك. في tailwind.config.js، يمكنك توسيع أو تعديل السمة الافتراضية:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#1DA1F2',
        secondary: '#14171A',
      },
    },
  },
}

باستخدام هذا التكوين، يمكنك استخدام الألوان المخصصة لديك كما يلي:

Custom Button

6. ترحيل مكونات Bootstrap إلى Tailwind

إذا كنت تريد إعادة إنشاء مكونات Bootstrap الشائعة (مثل الأزرار وأشرطة التنقل والنماذج) في Tailwind، فالأمر كله يتعلق باستخدام الأدوات المساعدة المناسبة. فيما يلي بعض الأمثلة:

مكون الزر

التمهيد:

Submit

الريح الخلفية:

  Submit

مكون شريط التنقل

التمهيد:

الريح الخلفية:

من خلال تعلم فئات الأدوات المساعدة في Tailwind، يمكنك إنشاء مكونات معقدة بمرونة أكبر من أنماط Bootstrap المعدة مسبقًا.

7. استخدام مكونات Tailwind الإضافية

يمتلك Tailwind نظامًا بيئيًا غنيًا بالمكونات الإضافية التي تعمل على توسيع وظائفه. على سبيل المثال، يمكنك بسهولة إضافة النماذج أو الطباعة أو الأدوات المساعدة لنسبة العرض إلى الارتفاع:

npm install @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio

في tailwind.config.js:

module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
  ]
}

8. ارتقِ بمستوى Metronic 9 – مجموعة أدوات Tailwind UI الشاملة

إذا كنت تبحث عن تجربة Tailwind CSS التي تجمع بين بساطة Bootstrap ومألوفته، فلا تبحث عن Metronic 9!

Metronic 9 عبارة عن مجموعة أدوات Tailwind UI شاملة توفر أفضل ما في العالمين: قوة الأداة المساعدة الأولى لـ Tailwind CSS، مقترنة بالنهج المنظم والمبني على المكونات الذي اعتدت عليه من Bootstrap.

لماذا تختار Metronic 9 لمشاريع Tailwind الخاصة بك؟

• &&&]شعبية وموثوقة: تم إصدار Metronic في عام 2013، وأصبح القالب رقم واحد للوحة التحكم الإدارية في سوق Envato مع 115000 عملية بيع و8000 تقييم 5 نجوم يدعم أكثر من 3000 مشروع SaaS في جميع أنحاء العالم.

&&&] المكونات المعدة مسبقًا: تمامًا مثل Bootstrap، يأتي Metronic 9 مزودًا بمئات من المكونات الجاهزة للاستخدام مثل الأزرار وأشرطة التنقل والنماذج والنماذج والمزيد - وكلها مدعومة بأدوات مساعدة Tailwind CSS. يتيح لك ذلك إنشاء واجهات مستخدم حديثة وسريعة الاستجابة دون الحاجة إلى كتابة أنماط مخصصة من البداية.
تجربة Tailwind Bootstrap: يمكنك الحصول على مرونة Tailwind مع الشعور المنظم لـ Bootstrap. سواء كنت تقوم بالترحيل من Bootstrap أو البدء من جديد، ستجد منحنى التعلم في حده الأدنى.
تخطيطات متعددة: مع أكثر من 5 عروض توضيحية لتخطيط التطبيقات و1000 عنصر واجهة مستخدم، يتيح لك Metronic 9 إنشاء تطبيقات معقدة بسرعة وسهولة، سواء كنت تعمل على لوحة معلومات SaaS، أو لوحة الإدارة، أو تطبيق ويب عام.
التكامل السلس: يتكامل Metronic 9 بشكل مثالي مع أطر العمل الحديثة مثل React وNext.js وAngular، مما يمنحك بداية قوية في رحلة Tailwind الخاصة بك مع سهولة استخدام تشبه Bootstrap.
ابدأ مع Metronic 9 اليوم!

إذا كنت تنتقل من Bootstrap وتريد بيئة مألوفة ومليئة بالميزات للعمل مع Tailwind، فإن Metronic 9 هو الحل الأمثل. لقد تم تصميمه لتوفير الوقت والجهد، مما يتيح لك التركيز على إنشاء منتجات رائعة، دون التورط في تفاصيل التصميم.

؟ قم بإلقاء نظرة على Metronic 9 هنا وابدأ في إنشاء واجهات مستخدم جميلة مع مرونة Tailwind وبساطة Bootstrap!

9. الخلاصة: هل Tailwind هو الخيار المناسب لك؟

إذا كنت تبحث عن مزيد من التخصيص والتحكم في تصميمك دون التقيد بالمكونات المعدة مسبقًا،

يعد Tailwind CSS خيارًا رائعًا. قد يستغرق الأمر بعض الوقت للتأقلم إذا كنت معتادًا على استخدام Bootstrap، ولكن بمجرد أن تعتاد على نهج المنفعة أولاً، فإن الاحتمالات لا حصر لها!

لا تتردد في طرح أي أسئلة أو مشاركة تجاربك في التعليقات أدناه. ترميز سعيد! ?