اسألني ما شئت عن إطار Tailwind Css وسأجيبك..

السلام عليكم ورحمة الله.

حياكم الله إخواني، جمعة مباركة علينا وعليكم.

لدي تجربة طويلة مع tailwind css بنيت بها عدة منتجات مختلفة منها:

  • أداة معجمي (mujami.alsharekh.org).

  • تطبيق محرّر دَوّن (beta.dawin.io).

  • مشروع SaaS (مشروع كبير الحجم) سيرى النور قريبا بحول الله خلال الأشهر القادمة.

يمكنك أن تسألني ما شئت عن المكتبة وعن دعم اللغة العربية (RTL) وخاصية @Apply و Animations وكذلك تحديثات النسخة الأخيرة (JIT) التي قدّمها قبل أسبوع Adam Wathan.

كتبت عدة أفكار حول المكتبة في مدونتي (أثناء تطويري للمشروع الأخير)، يمكنك الاطلاع عليها من الرابط التالي:

بانتظاركم، دمتم بود ..

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

مالذي يميزها عن بوتستراب ؟

و هل يتوفر فرص عمل لها مثل اطر العمل الاخرى ؟

MrAbdelhadi أضف ردا

المبدء مختلف، في tailwind لست مقيداً بـ Classes معرفّة مسبقاً في ملف style.css من قِبَل المكتبة. ولا حاجة أصلاً لأن تعرّفها كذلك. كل شيئ تكتبه في ملف HTML فقط.

فرص العمل على حسب الشركة، لكن كمهارة جديدة أنصحك تتعلمها.

هل يمكن ان تدلني على مصادر لتعلمها غير موقعها الرسمي ؟

اقصد مواقع او قنوات يوتيوب تعرفها ؟

و شكرا لكم

أفضل مصدر للتعلم هو التوثيق الرسمي + قناة Tailwind Lab.

هناك دورة ثانية تعلمت منها سابقاً، قبلما أن يهتموا بقناتهم:

  • هل لديك ملف config معدل تعمل به ؟ الرابط ؟

  • كيف تعاملت مع الأبعاد الغير موجودة مثل أبعاد top, right, left, bottom ... إلخ

  • هل حجم الملف ال css النهائي صغير الحجم مقارنة بحجم ملف css ذو تكويد عادي لنفس الموقع مثلا ؟

  • الكلاسات المحدودة فهل تحدك من ناحية التصميم خصوصا الأبعاد و الألوان ؟

  • ما رأيك في سرعة التطوير بإستخدامه مقارنة بالتطوير بال vanilla css ؟

  1. ملف Config تقوم بتعديله تماما وفق ما تريده من ألوان وخطوط وشفراتك الخاصة بك.

  2. كل Margins/Paddings معرّفة وإن كنت تقصد الطول والعرض فهي توفّر لك استخدام أبعادها المعرّفة مسبقاً أو تعرّفها بنفسك في ملف Config. ولكن في التحديث الجديد عبر إضافة JIT لست بحاجة إلى أي variant مسبق. أكتب واستمتع 😃

  3. الملف الناتج صغير جداً لا يقارن بأي مكتبة ثانية سوى Pure Css ولا أظنك بحاجة إلى استخدام Pure Css لو استخدمتها.

  4. الكلاسات الموجودة كافية 98%، ويمكنك تخصيص ما شئت عبر Config، إن واجهت بعض المشكلات المعروفة مثل Pseudo-element يمكنك العودة لملف css وتعريفها.

  5. السرعة لا تقارن، لربما أقول لك 100x مرة على الكتابة العادية للمشاريع المتوسطة وكبيرة الحجم.

مرحبا عبدالهادي،

يمكن نشر المساهمة في مجتمع اسألني، فهو مخصص لهذا النوع من المساهمات لتعم الفائدة وسيكون هناك تفاعل أكبر .

وشكرا على هذه المبادرة فجميل مشاركة العلم والخبرات للجميع.

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

مالذي يميزها عن بوتستراب ؟

و هل يتوفر فرص عمل لها مثل اطر العمل الاخرى ؟

هل ترى أن فكرة utility first ستكون هي المسيطر على أطر عمل css/html ؟ فعليا bootstrap لديه utilities classes شبيهة بفكرة tailwind لكن الأخيرة تتفوق عليها بالكثرة والتنوع.

نعم، المآل سيكون إليها حسب علمي. لكن ستبقى محدودة في بعض الأشياء التي لا ستعيدك إلى كلاسات css طبعاً.

هل هناك مشروع لترجمة توثيق tailwind؟

الوقت الحالي لا بالنسبة لي، لكن أفكّر بعد التفرّغ أن أشرحها في سلسلة على اليويتوب ان شاء الله.

ماهو الافضل بنسبة لك بوستراب او tailwindcss

بالطبع tailwind.

السلام عليكم ماهو المصدر الذي تعلمت منه لغة css او افضل مصدر للتعلم و التطوير مع الشكر المسبق

السلام عليكم

مشكور أخي عبد الهادي

لدي سؤالين:

أولا عن دعم العربية , هل سبق و صممت بها مشروع متعدد اللغات ؟

ثانيا هل هذا الإطار مناسبة لشخص مبتدئ في الجافاسكريت ؟

علما أن العديد من عناصر التصميم تحتاج لجافاسكريت للتفاعل معها و العناصر المتوفرة في headlessui محددوة

مشكور أخي مسبقا.

وعليكم السلام أخي بلال.

نعم صممت بها مشروع يدعم الاتجاه يمين ويسار وكان كل شيى تمام. بكود واحد تضيفه في html dir يتحول كل شيى كما تريد.

الاطار مناسب لأي شخص مبتدء كان أو محترف. وهو ليس محدود ولكن التحريك وغيره يتطلب اضافة كود برمجي اضافي ومكتبة Alpinejs كافية أيضا.

مجهول
  • حذف بواسطة المستخدم

مرحبا أخي أحمد. فلسفة tailwind مختلفة تماما، بحيث أنت تحتاج فقط إلى postcss معها. حاول تقرأ التوثيق أكثر لتفهم ميكانيزم عملها. وبالنسبة للـ JIT عبارة عن مود يسرع من محرّر tailwind وبه بعض المميزات.

مجهول
  • حذف بواسطة المستخدم

أهلا أخي أحمد، tailwind لا تهتم للـ sass إطلاقا. لأن مبدءها هو utility first.