كيفية استخدام Tailwind CSS لتطوير مواقع ويب Snazzy بسرعة

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

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

متحمس؟ هيا نبدأ!

ما المقصود بـ Tailwind CSS؟

يعد Tailwind CSS إطار عمل CSS (أوراق الأنماط المتتالية) مع فئات محددة مسبقًا يمكنك استخدامها لإنشاء صفحات الويب وتصميمها مباشرةً في ترميزك. يتيح لك كتابة CSS في HTML الخاص بك في شكل فئات محددة مسبقًا.

سنحدد ماهية إطار العمل وما نعنيه بعبارة "CSS-first-Utility" لمساعدتك على فهم ماهية إطار Tailwind CSS بشكل أفضل.

ما هو الإطار؟

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

الآن بعد أن حددنا معنى إطار العمل ، من المفترض أن يساعدك على فهم أن Tailwind CSS هي أداة مبنية على ميزات CSS. تم اشتقاق جميع وظائف إطار العمل من أنماط CSS المكونة على هيئة فئات.

ما هو إطار عمل CSS المنفعة أولاً؟

عندما نقول CSS أولًا ، فإننا نشير إلى الفئات في ترميزنا (HTML) بوظائف محددة مسبقًا. هذا يعني أنه يجب عليك فقط كتابة فئة ذات أنماط محددة مسبقًا مرفقة بها ، وسيتم تطبيق هذه الأنماط على العنصر.

في حالة العمل مع Vanilla CSS (CSS بدون أي إطار عمل أو مكتبة) ، عليك أولاً إعطاء العنصر الخاص بك اسم فئة ثم إرفاق خصائص وقيم مختلفة لتلك الفئة ، والتي بدورها ستطبق التصميم على العنصر الخاص بك .

سنعرض لك مثالا. هنا ، سننشئ زرًا بزوايا مستديرة ونص يقول "انقر فوقي". هذا ما سيبدو عليه الزر:

سنقوم بذلك أولاً باستخدام Vanilla CSS ، ثم استخدام فئات الأدوات المساعدة المتوفرة في Tailwind CSS.

مع فانيلا CSS

 <button class="btn">Click me</button>

لقد قدمنا ​​علامات الأزرار للفئة btn ، والتي سيتم تنسيقها باستخدام ورقة أنماط خارجية. إنه:

 .btn { background-color: #000; color: #fff; padding: 8px; border: none; border-radius: 4px; }

مع Tailwind CSS

 <button class="bg-black p-2 rounded">Click me</button>

كل هذا مطلوب لتحقيق نفس التأثير مثل المثال باستخدام Vanilla CSS. لم يتم إنشاء ورقة أنماط خارجية حيث يتعين عليك كتابة الأنماط لأن كل اسم فئة استخدمناه له بالفعل نمط محدد مسبقًا.

المتطلبات الأساسية لاستخدام Tailwind CSS

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

• معرفة جيدة بـ HTML وهيكلها وكيفية عملها
• أساس متين في CSS - استعلامات الوسائط و flexbox ونظام الشبكة

أين يمكن استخدام Tailwind CSS؟

يمكنك استخدام Tailwind CSS في مشاريع الويب الأمامية ، بما في ذلك أطر عمل JavaScript مثل React.js و Next.js و Laravel و Vite و Gatsby وما إلى ذلك.

إيجابيات وسلبيات Tailwind CSS

فيما يلي بعض مزايا استخدام Tailwind CSS:

1. عملية تطوير أسرع
2. يساعدك على ممارسة CSS أكثر لأن الأدوات المساعدة متشابهة
3. جميع المرافق والمكونات قابلة للتخصيص بسهولة
4. عادة ما يكون الحجم الإجمالي لملف الإنتاج صغيرًا
5. من السهل تعلم إذا كنت تعرف بالفعل CSS
6. وثائق جيدة للتعلم

تتضمن بعض عيوب استخدام Tailwind CSS ما يلي:

1. قد يبدو ترميزك غير منظم للمشاريع الكبيرة لأن جميع الأنماط موجودة في ملفات HTML.
2. ليس من السهل التعلم إذا كنت لا تفهم CSS جيدًا.
3. أنت مجبر على بناء كل شيء من البداية ، بما في ذلك عناصر الإدخال الخاصة بك. عند تثبيت Tailwind CSS ، فإنها تزيل جميع أنماط CSS الافتراضية.
4. لا يعد Tailwind CSS الخيار الأفضل إذا كنت تبحث عن تقليل الوقت الذي تقضيه في تطوير الواجهة الأمامية لموقع الويب الخاص بك والتركيز بشكل أساسي على منطق الواجهة الخلفية.

متى تستخدم Tailwind CSS

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

يمكنك أيضًا استخدام Tailwind CSS إذا كنت تبحث عن استخدام إطار عمل يمكن تكوينه بسهولة لأنه لا يجبرك على استخدام المكونات (أشرطة التنقل والأزرار والنماذج وما إلى ذلك) بنفس الطريقة طوال الوقت ؛ يمكنك اختيار الشكل الذي يجب أن تبدو عليه مكوناتك. ولكن لا يجب عليك استخدام Tailwind مطلقًا إذا لم تكن قد تعلمت CSS وتمارسه.

أوجه التشابه والاختلاف بين Tailwind CSS وأطر CSS الأخرى

فيما يلي بعض أوجه التشابه:

1. أنها تساعدك على إنجاز العمل بشكل أسرع.
2. يأتون مع فصول محددة مسبقًا.
3. لقد تم بناؤها على قواعد CSS.
4. كلاهما سهل التعلم والاستخدام مع معرفة عملية بـ CSS.

الآن دعونا نلقي نظرة على بعض الاختلافات:

1. تختلف Tailwind عن معظم أطر العمل لأنه يتعين عليك إنشاء المكونات الخاصة بك. على سبيل المثال ، يحتوي Bootstrap على مكونات مثل أشرطة التنقل والأزرار وما إلى ذلك ، ولكن مع Tailwind ، عليك أن تبني كل ذلك بنفسك.
2. بعض أطر العمل مثل Bootstrap ليست قابلة للتخصيص بسهولة ، لذا فأنت مجبر على استخدام أنماط التصميم الخاصة بها. في Tailwind ، يمكنك التحكم في تدفق كل شيء.
3. مطلوب معرفة متعمقة بـ CSS لاستخدام Tailwind. لا تكفي كتابة أسماء الفئات ، حيث يجب عليك دمجها كما لو كنت تكتب Vanilla CSS لتحقيق نفس النتيجة. كل ما تحتاج إلى معرفته في معظم الأطر الأخرى هو المكون الذي سيتم إنشاؤه عند استخدام اسم فئة.

كيف تبدأ باستخدام Tailwind CSS

قبل تثبيت Tailwind CSS ودمجها في مشروعك ، تأكد مما يلي:

1. لديك Node.js مثبتًا على جهاز الكمبيوتر الخاص بك للاستفادة من مدير حزمة Node (npm) في الجهاز.
2. تم إعداد مشروعك بالكامل مع إنشاء ملفاتك.

هذا ما يبدو عليه هيكل مشروعنا في الوقت الحالي:

 -Tailwind-tutorial -public -index.html -styles.css -src -styles.css

بعد ذلك ، ابدأ تشغيل Terminal لمشروعك وقم بتشغيل الأوامر التالية:

 npm install -D tailwindcss

سيقوم الأمر أعلاه بتثبيت إطار عمل Tailwind CSS باعتباره تبعية. بعد ذلك ، قم بإنشاء ملف tailwind.config.js الخاص بك عن طريق تشغيل الأمر أدناه:

 npm install -D tailwindcss

سيكون ملف tailwind.config.js فارغًا عند إنشائه ، لذلك علينا إضافة بعض سطور التعليمات البرمجية:

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

ستمكّن مسارات الملفات المتوفرة في مصفوفة المحتوى Tailwind من مسح / إزالة أي أنماط غير مستخدمة أثناء وقت الإنشاء.

الشيء التالي الذي يجب عليك فعله هو إضافة توجيهات "tailwind" إلى ملف CSS في مجلد src - وهذا هو المكان الذي تنشئ فيه Tailwind جميع أنماط الأداة المساعدة المحددة مسبقًا لك:

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

آخر شيء يجب فعله هو بدء عملية الإنشاء عن طريق تشغيل هذا الأمر في جهازك الطرفي:

 npx tailwindcss -i ./src/styles.css -o ./public/styles.css --watch

في الكود أعلاه ، نخبر Tailwind أن ملف الإدخال الخاص بنا هو ورقة الأنماط الموجودة في مجلد src وأن أيًا من الأنماط التي استخدمناها يجب أن تكون مضمنة في ملف الإخراج في المجلد العام. يسمح --watch لـ Tailwind بمشاهدة ملفك لمعرفة التغييرات لعملية الإنشاء التلقائية ؛ يعني حذفه أنه يجب علينا تشغيل هذا البرنامج النصي في كل مرة نريد إنشاء الكود الخاص بنا ورؤية الإخراج المطلوب.

استخدام Tailwind CSS

الآن بعد أن قمنا بتثبيت وإعداد Tailwind CSS لمشروعنا ، دعنا نرى بعض الأمثلة لفهم تطبيقه بشكل كامل.

مثال Flexbox

لاستخدام المرن في Tailwind CSS ، تحتاج إلى إضافة فئة من المرن ثم اتجاه العناصر المرنة:

 <div class="flex flex-row"> <button> Button 1 </button> <button> Button 2 </button> <button> Button 3 </button> </div>

سيؤدي استخدام flex-row-reverse عكس الترتيب الذي تظهر به الأزرار.

flex-col فوق بعضها البعض. هنا مثال:

 <div class="flex flex-col"> <button> Button 1 </button> <button> Button 2 </button> <button> Button 3 </button> </div>

تمامًا مثل المثال السابق ، يعكس flex-col-reverse الترتيب.

مثال على الشبكة

عند تحديد الأعمدة والصفوف في نظام الشبكة ، نتبع نهجًا مختلفًا عن طريق تمرير رقم سيحدد كيف ستشغل العناصر المساحة المتاحة:

 <div class="grid grid-cols-3"> <button> Button 1 </button> <button> Button 2 </button> <button> Button 3 </button> <button> Button 4 </button> <button> Button 5 </button> <button> Button 6 </button> </div>

الألوان

تأتي Tailwind بالعديد من الألوان المحددة مسبقًا. يحتوي كل لون على مجموعة من الأشكال المختلفة ، حيث يكون التباين الأخف هو 50 والأغمق هو 900.

هذه صورة بألوان متعددة وأكواد HTML السداسية لتوضيح ذلك

سنقدم مثالاً على كيفية القيام بذلك باستخدام اللون الأحمر أعلاه لإعطاء عنصر الزر لون الخلفية:

 <button class="bg-red-50">Click me</button> <button class="bg-red-100">Click me</button> <button class="bg-red-200">Click me</button> <button class="bg-red-300">Click me</button> <button class="bg-red-400">Click me</button> <button class="bg-red-500">Click me</button> <button class="bg-red-600">Click me</button> <button class="bg-red-700">Click me</button> <button class="bg-red-800">Click me</button> <button class="bg-red-900">Click me</button>

تركيب الجملة هذا هو نفسه بالنسبة لجميع الألوان في Tailwind باستثناء الأسود والأبيض ، والتي تتم كتابتها بنفس الطريقة ولكن بدون استخدام الأرقام: bg-black و bg-white .

لإضافة لون النص ، يمكنك استخدام نص text-{color} :

 <p class="text-yellow-600">Hello World</p>

حشوة

تمتلك Tailwind بالفعل نظام تصميم يساعدك في الحفاظ على مقياس متسق عبر تصميماتك. كل ما عليك معرفته هو بناء الجملة لتطبيق كل أداة مساعدة.

فيما يلي أدوات مساعدة لإضافة حشوة إلى عناصرك:

• تشير p إلى الحشو عبر العنصر بأكمله.
• يشير py إلى الحشو العلوي والسفلي.
• يشير px إلى اليسار والحشو الأيمن.
• يشير pt إلى ملء أعلى.
• تشير pr إلى المساحة المتروكة لليمين.
• يشير pb إلى أسفل الحشو.
• pl إلى اليسار الحشو

لتطبيقها على عناصرك ، يجب عليك استخدام الأرقام المناسبة التي قدمتها Tailwind - تشبه قليلاً الأرقام التي مثلت متغيرات الألوان في القسم الأخير. هذا ما نعنيه:

 <button class="p-0">Click me</button> <button class="pt-1">Click me</button> <button class="pr-2">Click me</button> <button class="pb-3">Click me</button> <button class="pl-4">Click me</button>

حافة

الأدوات المساعدة المحددة مسبقًا للحشو والهامش متشابهة جدًا. عليك استبدال p بـ m :

• m
• my
• mx
• mt
• mr
• mb
• ml

كيفية إنشاء مكون إضافي لـ Tailwind CSS

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

دعنا نتسخ أيدينا عن طريق إنشاء مكون إضافي يضيف اللون المائي وأداة تدوير تقوم بتدوير عنصر 150 على المحور X. سننشئ هذه الأدوات المساعدة في ملف tailwind.config.js باستخدام القليل من JavaScript.

 const plugin = require("tailwindcss/plugin"); module.exports = { content: ["./src/**/*.{html,js}", "./public/*.html"], theme: { extend: {}, }, plugins: [ plugin(function ({ addUtilities }) { const myUtilities = { ".bg-aqua": { background: "aqua" }, ".rotate-150deg": { transform: "rotateX(150deg)", }, }; addUtilities(myUtilities); }), ], };

الآن ، لنفصل هذا. كان أول شيء فعلناه هو استيراد وظيفة المكون الإضافي لـ Tailwind:

 const plugin = require("tailwindcss/plugin");

ثم واصلنا إنشاء الملحقات الخاصة بنا في مصفوفة المكونات الإضافية:

 plugins: [ plugin(function ({ addUtilities }) { const newUtilities = { ".bg-aqua": { background: "aqua" }, ".rotate-150deg": { transform: "rotateX(150deg)", }, }; addUtilities(newUtilities); }), ],

قد تضطر إلى إعادة تشغيل البرنامج النصي للبناء بعد إنشاء المكون الإضافي الخاص بك.

الآن بعد أن أصبحت المكونات الإضافية جاهزة ، يمكننا اختبارها:

 <button class="bg-aqua rotate-150deg">Click me</button>

إذا فعلت كل شيء بشكل صحيح ، يجب أن يكون لديك زر بلون مائي مع تدوير النص إلى 150 على المحور X.

ملخص

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

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

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

هل استخدمت Tailwind CSS أو إطار عمل CSS آخر في الماضي؟ شارك أفكارك في قسم التعليقات!