بتكلم عن @tailwindcss
تجربة استخدمتها قرابة سنة و اجزم
انها الأفضل حاليا في الساحة من
وجهة نظري طبعا 😬
أيضا اذا كنت من الناس اللي زيي يحب يكتب كل الcss صدقني بتغير وجهة نظرك بعد ما تجرب tailwind
دعونا نحكم👇
#حزب_المبرمجين #tailwindcss #برمجة
تجربة استخدمتها قرابة سنة و اجزم
انها الأفضل حاليا في الساحة من
وجهة نظري طبعا 😬
أيضا اذا كنت من الناس اللي زيي يحب يكتب كل الcss صدقني بتغير وجهة نظرك بعد ما تجرب tailwind
دعونا نحكم👇
#حزب_المبرمجين #tailwindcss #برمجة
في البداية ما هو tailwindcss
هو عبارة عن css framework
حيث فكرة ال framework
مثلها مثل bootstrap و bulma
هدفها الاساسي انها توفر كل اللي تحتاجه في css بدل من كتابتها من الصفر
دعونا نرى اهم مميزاتها 👇
هو عبارة عن css framework
حيث فكرة ال framework
مثلها مثل bootstrap و bulma
هدفها الاساسي انها توفر كل اللي تحتاجه في css بدل من كتابتها من الصفر
دعونا نرى اهم مميزاتها 👇
أولا : تعتمد على مفهوم ال utilities
بمعنى انك تستخدم كلاسات بسيطة جدا وتقوم بتأدية دور واحد فقط لكن توفر عليك وقت
فرضا ابغى كلاس لونه ازرق متوسط كل اللي عليك تستدعي الكلاس التالي
bg-blue-500
مثال : شوف الصورة اللي في الأسفل 👇
بمعنى انك تستخدم كلاسات بسيطة جدا وتقوم بتأدية دور واحد فقط لكن توفر عليك وقت
فرضا ابغى كلاس لونه ازرق متوسط كل اللي عليك تستدعي الكلاس التالي
bg-blue-500
مثال : شوف الصورة اللي في الأسفل 👇
إيش يميزها عن bootstrap ؟
الإشكالية في bootstrap انه صعب تحفظها بتشوف نفسك في اغلب الأحيان تأخذ كود كامل وانت مو فاهم الا شيء بسيط عكس tailwindcss هي سهلة الحفظ بالاضافة إلى انها تعطيك مرونة عالية عكس bootstrap
الإشكالية في bootstrap انه صعب تحفظها بتشوف نفسك في اغلب الأحيان تأخذ كود كامل وانت مو فاهم الا شيء بسيط عكس tailwindcss هي سهلة الحفظ بالاضافة إلى انها تعطيك مرونة عالية عكس bootstrap
ثانيا : إمكانية إضافة وتعديل الكلاسات
أكثر المميزات اللتي اعجبتني فيها انك تقدر تضيف وتعدل الsource code حق الtailwind بطريقة جدا مرنة فرضا
انت حاب تضيف لون خاص فيك او بمعنى آخر theme لموقعك تقدر تدخل على ملف tailwind.config.js
أكثر المميزات اللتي اعجبتني فيها انك تقدر تضيف وتعدل الsource code حق الtailwind بطريقة جدا مرنة فرضا
انت حاب تضيف لون خاص فيك او بمعنى آخر theme لموقعك تقدر تدخل على ملف tailwind.config.js
وتضيف الكلاسات اللي تحتاجها بكل سهوله وهذا بينعكس على كل من background-color , color , border 👌
ثالثا : تقدر تحمل extension في vscode اسمه Tailwind CSS IntelliSense
بس اهم شيء تشوف فيه قسم installation بيشرح لك كل شيء
ميزته انه يوفر لك autocomplete للcode في حال نسيت شيء او تبغى تختصر الكتابة زي كذا 👇
بس اهم شيء تشوف فيه قسم installation بيشرح لك كل شيء
ميزته انه يوفر لك autocomplete للcode في حال نسيت شيء او تبغى تختصر الكتابة زي كذا 👇
رابعاً : ممتاز في حال كنت قلقان من ناحية الpreformance 🚀
حجم ملف الtailwindcss ( الافتراضي بدون تعديلات) في production حوالي 71.5kB فقط ! 📂
لانه لو جيت فرضا وسويت ملفات css بتفهم قد إيش حجمها يوصل احيانا 😬
حجم ملف الtailwindcss ( الافتراضي بدون تعديلات) في production حوالي 71.5kB فقط ! 📂
لانه لو جيت فرضا وسويت ملفات css بتفهم قد إيش حجمها يوصل احيانا 😬
خامساً : تجعل موقعك في غاية الجمال 🤗
السبب في هذا انه مطورين tailwindcss اختاروا احجام تكون ممتازة لواجهات عالية الجودة من ناحية الالوان الاحترافية والاحجام الطول و العرض اللي بتحتاجها
السبب في هذا انه مطورين tailwindcss اختاروا احجام تكون ممتازة لواجهات عالية الجودة من ناحية الالوان الاحترافية والاحجام الطول و العرض اللي بتحتاجها
سادساً :
الdocumentation رهيبة وسهلة الاستخدام 🧾
و عملية التعلم فيها بتشوف المعلومة واضحة وسهلة تغنيك عن دراستها في كورس
هذا رابط الdoc :
tailwindcss.com
الdocumentation رهيبة وسهلة الاستخدام 🧾
و عملية التعلم فيها بتشوف المعلومة واضحة وسهلة تغنيك عن دراستها في كورس
هذا رابط الdoc :
tailwindcss.com
سابعاً وأخيرا :
توفر عليك كثيرا من الوقت⏳
مثلا تقدر من خلالها تسوي :
- responsive design 📱 💻: يتناسب مع مختلف الأجهزة
- animation , transition تقدر تسويها بكل سهولة
- Hover effect
- والكثير...
فهي خيار رائع و بتشوف نفسك منجز بشكل كبير اول ما تتأقلم على framework
توفر عليك كثيرا من الوقت⏳
مثلا تقدر من خلالها تسوي :
- responsive design 📱 💻: يتناسب مع مختلف الأجهزة
- animation , transition تقدر تسويها بكل سهولة
- Hover effect
- والكثير...
فهي خيار رائع و بتشوف نفسك منجز بشكل كبير اول ما تتأقلم على framework
و في الختام أتمنى هذا #الثريد يكون نال على إعجابكم 💙
واذا عندكم أي استفسار بخصوص الtailwindcss
بكون مسرور بالتواصل معكم
واذا عندكم أي استفسار بخصوص الtailwindcss
بكون مسرور بالتواصل معكم
Loading suggestions...