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

لماذا نستخدم Tailwind CSS؟

هناك بالفعل الكثير من CSS أطر عمل تبسط كيفية تصميم المطورين لصفحات الويب. فلماذا عليك استخدام Tailwind CSS؟

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

Tailwind CSS، ومع ذلك ، هو إطار عمل الأداة الأولى الذي يمنحك التحكم الإبداعي لإنشاء مكونات ديناميكية. وعلى عكس Bootstrap ، يمكنك بسهولة تخصيص التصميمات كما يحلو لك.

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

تعرف على المزيد حول الاختلافات بين Tailwind CSS و Bootstrap من مقالتنا حول هذا الموضوع.

عيوب استخدامTailwind CSS

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

يحب معظم المطورين اتباع مبدأ فصل الاهتمامات مثل أن تتم كتابة ملفات CSS و HTML في ملفات مختلفة. باستخدام Tailwind CSS ، يمكنك كتابة CSS مباشرةً في ترميز HTML - وهو عيب بالنسبة للبعض.

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

الشروع في العمل: إنشاء مشروع React

قم بتشغيل الأمر التالي في المحطة لسقالة a تتفاعل تطبيق باستخدام إنشاء رد فعل التطبيق.

npx إنشاء-رد فعل-تطبيق رد فعل-Tailwind

إنشاء رد فعل التطبيق يوفر طريقة سهلة لإنشاء تطبيق React بدون تكوين أدوات إنشاء مثل webpack أو babel أو linters. هذا يعني أنك ستنتهي ببيئة React عاملة في غضون دقائق.

يقوم الأمر أعلاه بإنشاء مجلد جديد باسم رد فعل الريح. انتقل إلى المجلد وافتحه باستخدام محرر النصوص المفضل لديك.

قرص مضغوط يتفاعل - الريح الخلفية

بعد ذلك ، قم بتثبيت Tailwind CSS وتهيئته للعمل مع تطبيق React.

استخدم Tailwind CSS في React

ثبّت Tailwind CSS وتبعياتها باستخدام هذا الأمر:

npm تثبيت برنامج Tailwindcss postcss autoprefixer

PostCSS يستخدم مكونات JavaScript الإضافية لجعل CSS متوافقة مع معظم المتصفحات. يقوم بفحص المتصفح الذي يعمل فيه التطبيق ويحدد polyfills اللازمة لجعل CSS الخاص بك يعمل بسلاسة. Autoprefixer هو مكون إضافي لـ PostCSS يستخدم قيمًا من caniuse.com لإضافة بادئات البائع تلقائيًا إلى قواعد CSS.

تهيئة Tailwind CSS

قم بتشغيل بداية الرياح الخلفية الأمر لإنشاء ملفات التكوين الافتراضية لـ Tailwind CSS.

npx tailwindcss الحرف الأول

هذا يصنع Tailwind.config.js في المجلد الجذر الذي يخزن جميع ملفات تهيئة Tailwind ويحتوي على ما يلي:

module.exports = {
 المحتوى: []،
 سمة: {
 تمديد: {}،
 },
 المكونات الإضافية: [] ،
}

تكوين مسارات القوالب

تحتاج إلى إخبار Tailwind CSS بالملفات التي يجب أن تتحقق منها لمعرفة فئات CSS المستخدمة. يتيح ذلك لـ Tailwind تحديد الفئات غير المستخدمة وإزالتها ، وبالتالي تقليل حجم CSS الذي تم إنشاؤه.

في Tailwind.config.js ، أضف مسارات القالب تحت مفتاح المحتوى.

module.exports = {
 المحتوى: [
 "./src/**/*.{js، jsx، ts، tsx}"،
 ],
 سمة: {
 تمديد: {}،
 },
 المكونات الإضافية: [] ،
}

ضخ Tailwind CSS في التفاعل

الخطوة التالية هي تضمين Tailwind CSS في التطبيق باستخدام تضمين التغريدة التوجيهات.

احذف كل شيء في index.css وأضف ما يلي لاستيراد الأنماط الأساسية والمكونات والأدوات المساعدة.

tilwind قاعدة ؛
مكوناتtailwind ؛
tailwind المرافق ؛

أخيرًا ، تأكد index.css يتم استيراده في index.js وستكون Tailwind CSS جاهزة للاستخدام.

استخدام Tailwind CSS لتصميم مكون React

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

تحتوي هذه الصفحة على قسمين رئيسيين: أ شريط التنقل، وقسم البطل (الذي يحتوي على عنوان وزر).

لتوضيح كيف تجعل Tailwind CSS كتابة CSS أسهل ، حاول تصميم صفحة الويب باستخدام CSS عادي و Tailwind CSS.

ابدأ بتعديل ملف App.js في ال src مجلد لإزالة التعليمات البرمجية غير الضرورية.

استيراد "./App.css"
وظيفة التطبيق () {
 إرجاع (



 );
}
تصدير التطبيق الافتراضي ؛

بعد ذلك ، أضف محتوى صفحة الويب إلى App.js.

استيراد "./App.css" ؛
وظيفة التطبيق () {
 إرجاع (







 تجعل Tailwind CSS مكونات React التصميم أسهل!



البدء






 );
}

لاستخدام CSS العادي ، أضف CSS إلى App.css.

التنقل {
 عرض: فليكس ؛
 تبرير المحتوى: مسافة بين ؛
 الحشو: 16 بكسل 36 بكسل ؛
 اللون: # 000 ؛
 مربع الظل: 0 بكسل 2 بكسل 5 بكسل 0 بكسل rgba (168 ، 168 ، 168 ، 0.75) ؛
}
.شعار {
 حجم الخط: 18 بكسل ؛
 وزن الخط: عريض ؛
}
ul {
 نمط القائمة: لا شيء ؛
 عرض: مضمنة المرن ؛
}
ul li {
 الهامش الأيسر: 16 بكسل ؛
 المؤشر: المؤشر.
}
.hero {
 عرض: فليكس ؛
 الاتجاه المرن: العمود.
 محاذاة العناصر: مركز ؛
 أعلى الهامش: 64 بكسل ؛
}
h1 {
 حجم الخط: 36 بكسل ؛
 محاذاة النص: مركز ؛
}
.btn {
 لون الخلفية: # 000000 ؛
 اللون: #fff ؛
 الحشو: 10 بكسل ؛
 العرض: محتوى مناسب ؛
 أعلى الهامش: 36 بكسل ؛
}

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

App.js يجب أن تبدو هكذا.

وظيفة التطبيق () {
 إرجاع (







 تجعل Tailwind CSS مكونات React التصميم أسهل!




 البدء







 );
}

لا تحتاج إلى الاستيراد App.css حيث يتم تخزين الأنماط التي تم إنشاؤها بواسطة Tailwind CSS في index.css الذي قمت باستيراده فيه index.js ابكر.

مقارنةً بـ CSS العادي ، ينتج عن هذا الأسلوب كود أقل يسهل فهمه.

كود بأناقة مع Tailwind CSS

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

ولكن ، كما ذكرنا سابقًا ، فإن Tailwind بعيدة كل البعد عن إطار عمل CSS الوحيد في السوق. ما الذي ستستخدمه لمشروعك القادم؟

مقارنة Tailwind CSS. Bootstrap: ما هو أفضل إطار؟

عند اختيار إطار عمل CSS ، من المهم العثور على الإطار الذي يلبي متطلباتك.

اقرأ التالي

عن المؤلف