استفسار عن دورة جافاسكربت

لا ، لا يوجد شرح لمكتبة مكتبة tailwindcss مع React  في دورة تطوير التطبيقات باستخدام لغة JavaScript . 

لكن الدورات في تطوير دائم ، ربما في المستقبل يتم إضافة مسارات يتم شرح فيها tailwindcss مع React ، علماً أن الوصول إلى الدورات يكون مدى الحياة . 

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

لا يوجد شرح في دروة تطوير التطبيقات باستخدام لغة JavaScript شرح لـ tailwindcss واستخدامه مع react.

وذلك لأن الدورة تركز على الاساسيات بينما استخدام tailwindcss مع react سيزيد من تعقيد الدورة وهو موضوع متقدم يمكنك تعلمه بعد الانتهاء من مسار react في الدورة.

وقد يفيدك النقاش التالي في اخذ فكرة عن العملية :

كذلك يمكنك تقديم طلب لإضافة شرح لهذه النقطة إلى الدعم من هنا

أنصحك أن تستخدم Bootstrap مع react فلقد تم شرحه في دورة تطوير واجهات المستخدم.

ويمكنك أن تعرف الفرق بين Bootstrap و Tailwind من خلال هذه المصادر.

ويمكنك معرفة كيفية تثبيت bootstrap مع react من خلال هذه الإجابة.

يمكنك استخدام tailwindcss  مع react بدون أي مشكلة حيث أن سواء tailwindcss أو bootstrap ما هي إلا أطر عمل لل css فليس لها علاقة بال react 

لذلك يمكنك العمل بالإطار الذي يعجبك ولكن يجب عليك التعرف على الفروقات بين الإطارين

 Bootstrap هو إطار يأتي مع عدد قليل من الأنماط أو ال components المعدة مسبقًا ، في حين أن Tailwind هي أداة تجعل كتابة css أسرع وأسهل ، ولكنها لا تقدم أي آراء حول التصميم (أي نمط للتصميم على عكس Bootstrap ) ، باستثناء بعض المسافات والألوان الافتراضية ، ولكن هذا كل شيء قابل للتخصيص تمامًا.إذا لم يكن التصميم هو الشيء الذي تفضله أو كنت ترغب في إنشاء نموذج أولي سريعًا ، أو مجرد إنشاء موقعين على شبكة الإنترنت ، فإن bootstrap يعد خيارًا جيدًا ، ولكن إذا كنت تريد المرونة في تصميمه بالطريقة التي تريدها أو إذا كان لمشروعك مصمم ووظيفتك هو تطبيق التصميم على واجهة أمامية ، فإن Tailwind هي الطريقة المثلى في رأيي.من ناحية الوظيفة ، لا أعتقد أنه مهم للغاية عندما يتعلق الأمر بأطر العمل. من المهم جدًا فهم المفاهيم الأساسية وراء Css وتعلمها إلى مستوى لائق 

يمكنك استخدام tailwindcss  مع react كالتالي

• إنشاء مشروع React الخاص بك
• ثبّت Tailwind CSS 

  npm install -D tailwindcss postcss autoprefixer

   

• توليد ملفات التكوين من أجل تهيئة كل ما نحتاجه لـ Tailwind في مشروع React الخاص بنا ، نحتاج إلى ملفين للتهيئة: Tailwind.config.js و postcss.config.js عن طريق الأمر التالي

   npm tailwindcss init -p

• داخل Tailwind.config.js ، نحتاج إلى تحديد المسار إلى ملفات قالب React عن طريق إضافة إعداد التكوين التالي:

  module.exports = {
     content: [
       "./src/**/*.{js,jsx,ts,tsx}",
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   }

• أضف توجيهات Tailwind في ملف index.css:

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

يمكنك استخدام Tailwind الأن

قبل تعلم TailwindCSS عليك بمعرفة ماهى الميزات والقيود الخاص بتلك المكتبة وأيضًا مقارنتها بالبدائل مثل Bootstrap و StyledComponents، ومتى يتم استخدامها.

Tailwind CSS

تتميز مكتبة Tailwind CSS بالتالي:

• توفر مجموعة كبيرة ومتنوعة من الأنماط والألوان الرئيسية المعرفة مسبقًا.
• يمكنك تخصيص الأنماط بشكل كبير ومعرفة مسبقًا ما هي الفئات المتوفرة من خلال العرض الأساسي للمكتبة.
• تستخدم بنية "Atomic CSS" التي تسمح لك بإنشاء الأنماط بسرعة وسهولة عن طريق الجمع بين الفئات الأساسية المتوفرة لتشكيل تراكيب جديدة.
• تدعم ميزة "Dark Mode" التي تمكنك من تغيير الألوان تلقائيًا عندما تتغير الخلفية.
• تدعم RTL ولكن بشكل محدود وهناك إضافات خارجية لذلك.

إليك بعض الأكواد البسيطة باستخدام Tailwind CSS:

<div class="container mx-auto p-4">
  <h1 class="text-4xl font-bold">مرحبًا بالعالم</h1>
  <p class="mt-4">أنا نص مثالي باستخدام Tailwind CSS</p>
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4">اضغط هنا</button>
</div>

Bootstrap

تتميز مكتبة Bootstrap بالتالي:

• توفر أنماط محددة مسبقًا لعدد كبير من العناصر والمكونات الشائعة، مما يجعل من السهل إنشاء واجهات المستخدم الجذابة.
• تحتوي على العديد من الإضافات والمكونات التي توفر العديد من الميزات، مثل معالجة النماذج والجداول وغيرها.
• تدعم RTL ولكن بشكل محدود.
• توفر Bootstrap مساعدات JavaScript مدمجة، مما يسمح بإضافة بعض التفاعلية إلى تطبيقات الويب.

مثال:

<div class="container p-4">
  <h1 class="text-primary display-4">مرحبًا بالعالم</h1>
  <p class="mt-4">أنا نص مثالي باستخدام Bootstrap</p>
  <button class="btn btn-primary mt-4">اضغط هنا</button>
</div>

Styled Components

تتميز مكتبة Styled Components بالتالي:

• توفر أسلوبًا مختلفًا للتعامل مع CSS وتستخدم قوة JavaScript لإنشاء عناصر UI.
• تسمح بتعريف المكونات باستخدام العلامات المشتقة باستخدام القوالب، مما يجعل من السهل إنشاء مكونات مخصصة وقابلة لإعادة الاستخدام.
• تسمح للمطورين بإنشاء ستايلات قابلة للتغيير والقابلة للتوسع بشكل سهل، مما يتيح إمكانية إجراء التعديلات بسهولة في جميع الأجزاء المتعلقة بالتصميم.
• تتميز بقدرتها على التعامل مع الحالات الحدودية وتسهيل التحويل بين المكونات. لا توفر الكثير من الميزات المدمجة مثل Bootstrap ولكن يمكن استخدام المكتبات الخارجية معها بسهولة.

مثال:

import styled from 'styled-components';

const Container = styled.div`
  padding: 1rem;
`;

const Title = styled.h1`
  font-size: 4rem;
  font-weight: bold;
  color: #0077ff;
`;

const Paragraph = styled.p`
  margin-top: 1rem;
`;

const Button = styled.button`
  background-color: #0077ff;
  color: #fff;
  font-weight: bold;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  margin-top: 1rem;
  &:hover {
    background-color: #0051a8;
  }
`;

function App() {
  return (
    <Container>
      <Title>مرحبًا بالعالم</Title>
      <Paragraph>أنا نص مثالي باستخدام Styled Components</Paragraph>
      <Button>اضغط هنا</Button>
    </Container>
  );
}

تلاحظ أن Styled Components تستخدم JavaScript لإنشاء المكونات في حين أن Bootstrap يستخدم الكلاسات لتحديد المظهر.

ما الأفضل بينهم ومتى يكون من الأفضل استخدام أيًا منهم؟

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

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

Styled Components، بالمقابل، تعتمد على JavaScript وتقنية CSS-in-JS، مما يتيح للمطورين تصميم وتخصيص المكونات باستخدام JavaScript وCSS معًا، ويسمح للمستخدمين بتحسين أداء التطبيق والتحكم في الأنماط والأنماط الشخصية بشكل أفضل.

لذا، يعتمد الاختيار بين TailwindCSS وBootstrap وStyled Components على الحاجة والغرض من المشروع والأولويات المطلوبة، فإذا كنت تحتاج إلى تسريع تطوير تطبيقات الويب الخاصة بك وتخصيصها بسهولة، فقد يكون TailwindCSS الخيار الأفضل. وإذا كنت تبحث عن مكتبة تصميم مكونات جاهزة ووظيفية، فقد يكون Bootstrap الخيار الأفضل، وإذا كنت تريد تصميم مكونات مخصصة باستخدام JavaScript و CSS معًا، فقد يكون Styled Components الخيار الأفضل.