مقدمة في أساسيات إطار عمل TailwindCSS
هذا المقال هو شرح لتسهيل البدء باستخدام إطار عمل TailwindCSS والذي يتميز بكونه Utility-first framework بعيدا عن إطارات العمل ذات المكونات الجاهزة.
السلام عليكم ورحمة الله وبركاته.
في هذا المقال سنقوم بالبدء باستخدام إطار العمل TailwindCSS وهو إطار عمل لـ CSS يسهل التصميم بشكل سريع ومنظم. الإطار يقدم مفهوما مختلفا عن باقي أطر العمل المعروفة كـ Bootstrap أو Foundation وغيرها.
-
ملاحظة:
تم التطبيق في هذا الشرح على النسخة الثانية من إطار العمل ( 1.0.4 ) وهي آخر نسخة حتى تاريخ كتابة هذا المقال، احرص على الانتباه على رقم النسخة قبل التطبيق والانتباه للاختلافات في الاوامر او اسماء الكلاسات ان وجدت في حال طبقت على نسخة مختلفة.
فهرس محتويات المقال:
- تعريف عام بإطار العمل.
- تثبيت إطار العمل.
- التخصيص وملف الإعدادات.
- مثال على التصميم باستخدام Tailwind.
- إستخراج المكونات.
- التحكم بحجم الملف الناتج.
1. تعريف عام بإطار العمل.
توجد العديد من أُطُر العمل لـ CSS تسهل وتسرع عملية التصميم، ولعل Bootstrap هو الأشهر من بينها، اذن فما الذي يميز Tailwind ؟
Tailwind يختلف عن معظم أطر العمل الشهيرة بكونه Utility-First CSS Framework، بينما باقي أطر العمل المعروفة كـ Bootstrap هي عبارة عن Component-Based CSS Frameworks.
الفرق بين هذين النوعين من الإطارات يمكن تلخيصه لو ألقيت نظرة بسيطة على التوثيق الرسمي الخاص بـ Bootstrap، والتوثيق الرسمي الخاص بـ Tailwind، ستجد أن Bootstrap يركز على مكونات صفحات الويب ويقدمها لك بشكل جاهز، فستجد تصميمات جاهزة للـ Buttons أو حتى لمكونات الـ Forms بشكل عام، كما ستجد بعض المكونات كالـ Alerts أو navbars وغيرها.
اذن فـ Bootstrap أو أي إطار عمل يعتمد على المكونات ( Component Based ) يقدم لك فعليا عددا كبيرا من مكونات صفحات الويب بأسلوب تصميم موحد، يمكنك حتى البدء باستخدامها دون استخدام CSS أبدا، بل استخدام الكلاسات الجاهزة التي توفرها لك أطر العمل من هذا النوع.
بينما أطر العمل كـ Tailwind لا تقدم Components جاهزة أبدا، فلو بحثت في التوثيق الرسمي، قد تجد أمثلة لطريقة عمل Button بشكل معين، لكن لا يوجد كلاس خاص للـ Buttons يمكنك استخدامه، بل لن تجد أي Component جاهز في إطار العمل، إنما يقوم إطار العمل بإزالة أي Style افتراضي للمكونات، فستجد ال Button دون خلفية أو حدود أو غيرها، حتى تلك التي يضيفها المتصفح، يقوم Tailwind بازالتها حتى يترك لك الحرية بتخصيصها كما شئت، فبدلا من أن يقدم لك كلاسات تقوم بإعطاء شكل محدد للـ Component يقوم إطار العمل بتزويدك بكلاسات خدمية ( Utilities ) فهي تبدو وكأنها خصائص CSS عادية. فستجد مثلا كلاسات لعمل Padding، وأخرى لتغيير لون الخلفية وهكذا، لكن ما الفائدة؟ إن كان الأمر كذلك لم لا أستخدم CSS مباشرة بدل اللجوء لاستخدام Tailwind؟
السبب ببساطة هو أن Tailwind تقدم لكن طريقة رائعة لعمل نظام تصميم ( Design System ) خاص بك، فهو يجهز صفحة الويب لتكون خالية من أي تصميم مسبق، ويزودك بملف جافاسكربت تجد فيه جميع إعدادات إطار العمل، فيتم توليد الكلاسات بحسب الإعدادات التي تقدمها له في هذا الملف. مما يمكنك من عمل نظام تصميم خاص بك باستخدام جافاسكربت.
فمثلا يمكنك من خلال إعدادات جافاسكربت تحديد أحجام الشاشات التي ستقوم بتغيير في الستايل عندها لجعل التصميم متوافق مع مختلف الأحجام مثلا، فلو حددت في ملف الإعدادات حجمين، وسميتهم sm و lg، وحددت له انك بحاجة لتغيير الـ Padding بحسب حجم الشاشة، فستجد ان Tailwind سيقوم تلقائيا بعمل كلاسات padding لكل حجم شاشة، فمثلا ستجد كلاس باسم ( sm:p-1 ) وستجد في نفس الوقت كلاس آخر باسم ( lg:p-1 ) فهو يأخذ الإعدادات التي تضعها له، ويولد بحسبها الكلاسات المناسبة.
هذه مقارنة بين Bootstrap كمثال على الـ Component-Based Framework وبين Tailwind كمثال على الـ Utility-First Framework، المزايا والعيوب نسبية، فما تراه ميزة قد يراه غيرك عيبا، المقارنة تأتي من وجهة نظري الشخصية فقط لمساعدتك على اختيار الإطار الأنسب لك.
خلاصة المقارنة - من وجهة نظري الشخصية - :
- إذا أردت إنهاء تصميم الموقع بأسرع وقت ممكن وبسهولة، بحيث يكون التصميم جيدا ومريحا لكن ليس مميزا أنصحك باستخدام Bootstrap ( أو ما يشابهه من أطر ).
- إذا أردت عمل نظام تصميم ( Design System ) خاص بك، مع تصميم مميز تعمل عليه من الصفر، دون وجود مشتتات أو ستايلات مسبقة تحتاج لعمل Override لها، فأنصحك باستخدام Tailwind.
2. إنشاء مشروع جديد وتثبيت إطار العمل.
قم بانشاء مجلد جديد للمشروع، ثم ثبت TailwindCSS باستخدام الأمر التالي:
npm install tailwindcss
قم الآن بانشاء ملف الـ CSS الرئيسي الذي ستضع فيه الستايلات الخاصة بك.
لتتمكن من استخدام كلاسات Tailwind داخل هذا الملف ستحتاج لاستدعاءها، ضع أوامر الاستدعاء في بداية الملف:
@tailwind base;
@tailwind components;
@tailwind utilities;
ذكرنا في بداية المقال أن Tailwind يعتمد بشكل أساسي على ملف Javascript يحوي على جميع إعداداته، لتوليد هذا الملف نفذ الأمر التالي في سطر الأوامر:
npx tailwind init --full
الخيار full ليس إلزاميا، وظيفته أن يقوم بإنشاء الملف بالإعدادات الافتراضية الخاصة بـ Tailwind، فستجد في هذا الملف الألوان الافتراضية وقياسات الـ Padding والـ Margin وغيرها من الإعدادات، إضافة إلى تفعيل الـ utilities والإضافات، عدم استخدام هذا الخيار سينشئ ملف إعدادات فارغ حتى تقوم بوضع الإعدادات التي تناسبك، شخصيا أفضل استخدام هذا الخيار ثم تعديل الإعدادات بما يناسبني عوضا عن كتابة الإعدادات من الصفر.
هكذا نكون قد أنهينا التثبيت.
3. التخصيص وملف الإعدادات.
-
ملاحظة:
إن وجدت صعوبة في فهم هذا الجزء من المقال، يمكنك الانتقال إلى الجزء الرابع الذي يحوي أمثلة لكيفية التصميم باستخدام Tailwind، ثم الرجوع إلى هذا الجزء لتعرف كيف تخصص الكلاسات المستخدمة.
في هذا القسم من المقال سنتعرف على محتويات ملف الإعدادات وطريقة التخصيص، سنقوم بشرح كل جزئية من ملف الإعدادات على حدة، قمت باختصار بعض محتويات الملف لتقصير الشرح وتسهيل الفهم.
3.1. القسم theme:
هذا القسم هو أكبر قسم في ملف الإعدادات، لن نشرح جميع أقسامه، لكن سنشرح بعضها وطريقة تخصيصها لتوضيح الفكرة فقط، وتخصيص باقي أجزاءه يتم بنفس الطريقة.
أولا ستجد داخله Object باسم screens:
هذا الجزء من ملف الإعدادات مختص بعمل الـ Breakpoints وهي تساعد في جعل التصميم متوافق مع مختلف أحجام الشاشات. كما تلاحظ، فهو كمعظم الإعدادات في ملف الإعدادات عبارة عن Javascript Object، فمثلا لو علمنا ان الكلاس "bg-red" يستخدم في Tailwind لتحديد الخلفية باللون الأحمر، فبسبب وجود 4 قياسات للشاشات، ستتقوم Tailwind بعمل 4 كلاسات تحوِّل الخلفية الى اللون الأحمر، واحدة لكل شاشة ( سنتعلم لاحقا كيف نلغي هذه الخاصية لبعض الكلاسات التي لا تلزم لتقليل حجم الملف )، حيث سيصبح لدينا كلاس باسم "sm:bg-red" وكلاس آخر باسم "md:bg-red" وهكذا، فالكلاس "bg-red" يحول الخلفية الى اللون الاحمر بكل الأحوال بشكل عادي، بينما الكلاس "sm:bg-red" لن يحول الخلفية إلى اللون الأحمر إلا إذا كان حجم الخلفية أكبر من 640 بكسل.
بما أن هذا الخيار عبارة عن Object جافاسكربت فيمكنك حذف اي خاصية لا تحتاجها، فمثلا اذا كنت تحتاج وجود Breakpoint عند 768 بكسل، لكن لا تحتاج Breakpoint أقل، يمكنك بكل بساطة حذف الخاصية sm بالكامل، أو اضافة خاصية أخرى بالاسم الذي تريده والقيمة التي تريدها، فلا توجد مشكلة بالحذف أو الإضافة أو التعديل ما دامت القيم مقبولة وصحيحة.
الـ Object التالي في الملف هو colors، وهو ليس مرتبطا بأي خاصية CSS، نقوم فيه فقط بتحديد الالوان التي نحتاج أن نستخدمها في التصميم، لنلقي نظرة على جزء منه:
أنت لست ملزما بالألوان الموجودة افتراضيا في Tailwind، يمكنك تعريف أي لون بأي اسم، وأي قيمة ما دامت قيمة مقبولة في CSS، لاحظ أن قيمة اللون قد تكون نصّا ( String ) كما في transparent و black و white، أو قد تكون Object أيضا كما في gray و red، فكما ترى، داخل gray و red توجد عدة درجات من نفس اللون، كل واحدة مرقمة برقم مختلف، في tailwind 1.0.4 يتم استخدام الأرقام من فئة المئات للتعبير عن درجات الألوان، لكنك لست ملزما بذلك، يمكنك استبدالها باسم أو كلمة.
لكن بما أن الـ colors ليس مرتبطا بأي خاصية CSS، لماذا نقوم بتعريفه؟
ستلاحظ لو نزلت قليلا الى الاسفل، وجود خاصية backgroundColor التي تمثل لون الخلفية، و textColors والتي تمثل لون النص ( وهي الخاصية color في css ) اضافة إلى borderColor،، لاحظ عدم وجود تعريف لكل لون أي من هذه الخصائص، انما تم استدعاء القيم التي عرفناها في colors:
لاحظ أن هذه الخصائص تستدعي function باسم theme، ويمرر لها قيمة 'colors' وهي ترجع الاوبجكت colors. لذلك فبدلا من إعادة كتابة الألوان في كل مرة للون الخلفية، وكتابتها ثانية للون النص، قمنا بانشاء الأوبجكت colors واستخدامه عدة مرات لكل خاصية، بالنسبة للخاصية backgroundColor فهي تقوم بانشاء كلاسات للتعامل مع لون الخلفية، ففي المثال السابق كان لدينا الالوان black و white، فسيقوم Tailwind بانشاء كلاسات لتغيير الخلفية الى هذه الألوان: "bg-black" و "bg-white" أما بالنسبة للألوان متعددة الدرجات، مثل red فسيتم توليد الكلاسات على هذا الشكل: "bg-red-100" و "bg-red-200" بحسب الخصائص الموجودة في الأوبجكت red.
أما الخاصية textColor فهي تقوم بانشاء كلاسات لتغيير لون النص، مثلا : "text-black" و "text-red-100".
الخاصية borderColor مختصة بتلوين الحدود، وسناتي على مثال لها لاحقا.
باقي الإعدادات في القسم Theme يمكن تعديلها بنفس الطريقة، الإعدادات كثيرة ولا يمكن شرحها في مقال واحد، لكن يمكنك معرفة وظيفة كل خاصية تريد تعديلها عن طريق التوثيق الرسمي:
https://tailwindcss.com/docs/theme
3.2. القسم variants:
هذا القسم يمكنك من التحكم بالخصائص التي تريد تعطيلها او تفعيلها او ربطها بخصائص أخرى في إطار العمل، تعديل جميع الخصائص يتم بنفس الطريقة، لنلقي نظرة سريعة على بعض الخصائص لنشرح طريقة التعديل:
لنأخذ مثالا على 4 خصائص فقط، وهي backgroundColor، textColor, zIndex, float، نلاحظ أن قيمة كل واحدة من هذه الخصائص عبارة عن array، تحوي الـ variants المفعلة لكل خاصية، فالـ variant المسمى responsive هو المسؤول عن تكرار الخصائص لكل Breakpoint معرفة في الاوبجكت screens. لنفترض أنني في تصميمي لا أحتاج لتغيير zIndex بحسب حجم الشاشة، فدائما أستخدم الـ z-index وقيمتها لا تتغير عندي أبدا، فيمكنني في هذه الحالة ازالة الـ variant الخاص بالـ responsive، فبدلا من أن يحتوي ملف ال CSS النهائي على "z-10" و "z-20" و "sm:z-10" و "sm:z-20" وهكذا لكل Breakpoint وأنا اصلا لا احتاجهم، عند ازالة الـ responsive سيحتوي فقط على z-10 و z-20 ... إلخ، دون تكرارها لكل حجم شاشة. فلو كان لدي 5 قيم للـ z-index، و 3 احجام شاشات، سينتج عندي من الـ z-index وحدها 20 كلاس، ساستخدم منهم فقط 5 كلاسات، والباقي لا استفيد منه، بينما لو ازلت خاصية responsive، سينتج عندي فقط 5 كلاسات وهي الكلاسات التي أحتاجها لهذه الخاصية، وهذا يساهم في تقليل حجم ملف الـ CSS الناتج بشكل كبير.
يمكنك أيضا تعطيل خاصية بالكامل، فمثلا أنا استخدم flexbox في ترتيب العناصر على الشاشة ولا استخدم خصائص الـ float أبدا، فيمكنني في هذه الحالة جعل قيمة الـ float = false، فعندما يقوم Tailwind بتوليد الكلاسات، لن يولد أي كلاس للـ float لانني طلبت منه عدم فعل ذلك.
إضافة الى وجود variants اخرى مثل hover، او focus والتي لا تفعل الخاصية الا عند هذه الأحداث، فمثلا سيتم توليد كلاس "bg-red" وسيتم أيضا توليد كلاس "hover:bg-red" وكلاس "focus:bg-red" في حال كنت لا استخدم الـ focus لخاصية backgroundColor يمكنني ازالتها من الـ array بالكامل، هذا مثال على هذه الخصائص بعد تعديلها بما يناسبني:
3.3. إعدادات أخرى:
توجد خصائص قليلة أخرى يمكن تعديلها أيضا في ملف الإعدادات، سأشرح اثنتين منها بشكل سريع، ويمكنك رؤية جميع الخصائص في توثيق Tailwind.
الخاصية prefix تمكنك من إضافة نص يتم إدراجه قبل اسماء الكلاسات لمنع التعارض مع أسماء كلاسات أخرى.
الخاصية separator تمكنك من تغيير الرمز المستخدم للفصل بين اسم الـ variant واسم الكلاس.
4. مثال على التصميم باستخدام Tailwind.
بعد أن قمت بتخصيص ملف الإعدادات بما يناسب نظام التصميم أو المشروع الخاص بك - يمكنك بالطبع للتجربة فقط ان تبقي جميع الإعدادات كما هي - يمكنك الآن أن تبدأ باستخدام الكلاسات، لكن قبل ذلك، يفترض أنك فهمت من القسم السابق أن الكلاسات في Tailwind ليست موجودة بالفعل بشكل افتراضي كما في Bootstrap مثلا، إنما يقوم Tailwind بتوليدها بحسب احتياجاتك وبحسب الإعدادات التي وضعتها في ملف الإعدادات، فكما رأينا سابقا يمكن تعطيل بعض المزايا أو تغيير مزايا أخرى، كما يمكن إضافة Plugins أو Variants خارجية، فبعد أي تعديل على ملف الإعدادات، يجب أن نخبر Tailwind أننا غيرنا الإعدادات، ليقوم هو بدوره بتوليد الكلاسات بناء على الإعدادات الجديدة، لذلك، لتوليد ملف الـ CSS النهائي الذي يحتوي على الكلاسات قم بتنفيذ الأمر التالي:
npx tailwind build styles.css -o output.css
الملف styles.css هو الملف الذي قمنا بإنشائه في الجزء رقم 2 من المقال واستدعينا فيه كلاسات وإعدادات Tailwind، أما الملف output.css فهو ملف الـ CSS الفعلي الذي سيقوم Tailwind بإنشائه وستقوم أنت باستخدامه في مشروعك.
على سبيل المثال، سنقوم بتصميم Login form بسيط باستخدام Tailwind، أولا في صفحة الـ HTML نقوم باستدعاء ملف الـ CSS الناتج من الأمر السابق.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind test</title>
<link rel="stylesheet" href="output.css" />
</head>
<body></body>
</html>
ما نريد عمله هو صفحة بسيطة، تحتوي في وسطها على form به input لادخال اسم المستخدم، وآخر لادخال كلمة المرور، لاحظ الكلاسات التي أضفناها:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind test</title>
<link rel="stylesheet" href="output.css" />
</head>
<body
class="bg-gray-300 h-screen flex justify-center items-center"
dir="rtl"
>
<form class="flex flex-col bg-gray-800 text-white p-5 w-1/4">
<input
class="p-3 mb-5 bg-gray-700 w-full"
placeholder="البريد الالكتروني"
/>
<input
class="p-3 bg-gray-700 mb-3 w-full"
type="password"
placeholder="كلمة المرور"
/>
</div>
<div class="flex justify-between items-center mb-3">
<label class="checkbox">
<input type="checkbox"/>
تذكرني
</label>
<button class="py-3 px-10 bg-teal-500 hover:bg-teal-400" type="submit">دخول</button>
</div>
</form>
</body>
</html>
لاحظ الكلاسات التي قمنا بأضافتها، لاحظ عدم وجود أي كلاس يدل على Component محدد، انما كلها ستايلات عادية من تغيير للون الخلفية، او عمل margin أو كلاسات متعلقة بالـ Flexbox، ففعليا يمكنك تصميم صفحات كبيرة جدا دون الحاجة لكتابة css مخصص إلا في حالات قليلة، هذه الكلاسات كلها تم توليدها بحسب ملف الإعدادات الخاص بـ Tailwind، في هذا المثال لم أقم بتعديل أي شيء في الملف، لكن يمكنك تعديل الإعدادات بما يناسب تصميمك كما وضحنا في القسم السابق من المقال.
للتعرف على وظيفة الكلاسات المستخدمة، أو البحث عن طريقة عمل شيء محدد باستخدام Tailwind راجع التوثيق الرسمي:
https://tailwindcss.com/docs
وهذه صورة للناتج:
5. استخراج المكونات.
صار واضحا أن Tailwind لا يُلزِمك بأي مكونات أو Components تم تصميمها مسبقا، إلا أنه يراعي وجود الحاجة لعمل Components ويوفر طريقة سهلة لذلك، فكما تلاحظ، اسماء وترتيب الكلاسات فيه رائعة جدا وتسهل العمل ولا تضطرك لاستخدام css في كل شيء وعمل class او id لكل جزء من أجزاء التصميم، لكن في المقابل، ستجد أنك بحاجة لعمل بعض الـ Components لترتيب الكود أكثر، وللتقليل من التكرار، ففي المثال السابق، ستلاحظ أننا قمنا بتكرار نفس الكلاسات الخاصة بالـ input مرتين، وكان الأفضل والأسهل عمل كلاس آخر للـ input بشكل عام، حتى لا نضطر لنسخ مجموعة كبيرة من الكلاسات كل مرة، ولتقصير الكود ومنع الاكثار من التكرار، كذلك الأمر بالنسبة للـ Button، فلا بد أن موقعك سيحتوي على عدد كبير من الـ Buttons ومعظمها بنفس التصميم، وكما نعلم فإن Tailwind يشجعك على انشاء نظام التصميم الخاص بك، فبدلا من أن تستخدم إطار عمل كـ Bootstrap يوفر لك عددا كبيرا من الـ Components بتصميمات جاهزة، يشجعك Tailwind على انشاء الـ Components التي تلزمك فقط، وبالتصميم الذي تريده.
سنعطي مثالا على استخراج الـ input كمكوِّن، ومثالا آخر للـ Button، في ملف style.css الذي قمنا باستدعاء Tailwind فيه، قم باستخدام القاعدة "@apply" لاستخراج المكون كالآتي:
.text-input {
@apply p-3 mb-5 bg-gray-700 w-full;
}
كما ترى، فإن بإمكاننا تعريف class جديد، واستخدام كلاسات Tailwind بداخله عن طريق القاعدة "@apply"، هذا مثال على الـ Button:
.btn {
@apply py-3 px-10 bg-teal-500
}
.btn:hover {
@apply bg-teal-400
}
لاحظ أن @apply لا تتعامل مع الكلاسات التي تستخدم variant كـ hover أو focus، لذلك نستخدم الـ "pseudo-classes" العادية في css.
الآن يمكننا تعديل الـ html لاستخدام الكلاسات الجديدة:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind test</title>
<link rel="stylesheet" href="output.css" />
</head>
<body
class="bg-gray-300 h-screen flex justify-center items-center"
dir="rtl"
>
<form class="flex flex-col bg-gray-800 text-white p-5 w-1/4">
<input
class="text-input mb-5"
placeholder="البريد الالكتروني"
/>
<input
class="text-input w-full"
type="password"
placeholder="كلمة المرور"
/>
</div>
<div class="flex justify-between items-center mb-3">
<label class="checkbox">
<input type="checkbox"/>
تذكرني
</label>
<button class="btn" type="submit">دخول</button>
</div>
</form>
</body>
</html>
6. التحكم بحجم الملف الناتج.
حجم بملف الـ CSS النهائي الذي سينتج مهم جدا، فكلما قل حجم الملفات في المواقع بشكل عام، قلت المدة اللازمة لتحميلها على جهاز المستخدم، بالتالي زادت سرعة تحميل الموقع، لذلك يجب الاهتمام بهذا الموضوع، الجدول التالي موجود في التوثيق الرسمي لـ Tailwind، وهو يعرض مقارنة من حيث الحجم بين Tailwind وبين أشهر أطر العمل لـ CSS المقارنة تمت على نسخة عادية من الملف، وعلى نسخة مصغرة Minified ( وهي نسخة تم ازالة المسافات والرموز الزائدة منها لتصغير حجم الملف )، ونسخ مضغوطة باستخدام خوارزميتي Gzip و Brotli، طبعا بما أن Tailwind قابل للتخصيص وتغيير الإعدادات، فحجم الملف الناتج يعتمد على الإعدادات المستخدمة، الجدول التالي يستخدم الإعدادات الافتراضية لـ Tailwind:
لاحظ أن حجم ملف Tailwind بالاعدادات الافتراضية كبير جدا مقارنة بغيره، لكن بما أنه قابل للتخصيص بسهولة، فيمكنك تقليل حجم الملف الناتج بعدة طرق، فعلى سبيل المثال، التوثيق الرسمي لـ Tailwind يتحدث عن موقع Firefox Send، هذا الموقع يستخدم Tailwind وحجم ملف الـ CSS فيه 14.4 KB ( نسخة مصغرة غير مضغوطة )، وبخوارزمية ضغط Gzip حجمه يساوي 5.2 kb فقط.
توجد عدة طرق لتقليل حجم الملف، أفضل وأسهل طريقة وهي الطريقة التي تستخدمها خدمة Firefox Send هي استخدام حزمة Purgecss، هذه الحزمة تقوم بالبحث في ملفات مشروعك عن أي كلاس تستخدمه، ثم تقوم بحذف أي كلاس غير مستخدم من ملف الـ css الناتج، فمثلا لو فرضنا ان لديك ملف CSS يحوي 300 كلاس، واستخدمت منهم 50 كلاس فقط، ستقوم الأداة بحذف الـ 250 كلاس الغير مستخدمة.
لعدم الإطالة بالشرح، لن أشرح هذه الأداة في هذا المقال، لكن يمكنك مراجعة موقعهم والتوثيق الرسمي لـ Tailwind.
هناك طبعا طريقة أخرى لتقليل حجم الملف في حال لم تستخدم الأداة السابقة لسبب أو لآخر، وهي بالتلاعب بملف الإعدادات الخاص بـ Tailwind، فالملف الافتراضي مثلا، يحوي اكثر من 90 لون مختلف، ولا أظن أنك ستستخدم كل هذه الألوان في أي تصميم، 90 لون مستخدمة كلها في خاصية backgroundColor وخاصية textColor و borderColor، هذا يعني أنه سيتم انشاء 90 كلاس لهذه الخصائص الثلاثة، أي ما يعادل 270 كلاس، وبالطبع نحن لم نحسب الـ variants، ففي الإعدادات الافتراضية يوجد 4 احجام للشاشات، والـ 3 خصائص التي ذكرناها تستخدم "responsive variant"، فيمكننا في هذه الحالة ضرب الرقم 270، بعدد الـ Breakpoints فينتج لدينا 1080 كلاس، كذلك فالثلاث خصائص تستخدم hover و focus، بالتالي سينتج لديك 2160 كلاس من هذه الخصائص الثلاثة فقط،
ومن هذا نستنتج ما يلي:
- يمكن تقليل حجم الملف بإزالة جميع الألوان التي لا تلزم بالتصميم.
- في حال وجدت ألوان تستخدمها في لون النص، ولا تستخدمها كخلفية، فلا تقم بتعريف هذه الألوان بالخاصيتين.
- قم بإزالة أي variant لا تستخدمه، فمثلا ان كنت لا تغير الوان الحدود بحسب الـ Breakpoint فقم بازالة responsive من الخاصية borderColor.
- قم بتعطيل أي خاصية لا تستخدمها، فمثلا لو كنت لا تستخدم الخاصية float أبدا، قم بتعطيلها كما فعلنا سابقا في هذا المقال، وهذا سيحذف كثيرا من الكلاسات غير المستخدمة.
- قم بحذف أي breakpoint لا تحتاجها.
وفي حال طبقت كل هذه الخطوات، ففي الغالب سيكون حجم ملف Tailwind اصغر بكثير من احجام جميع ملفات باقي أطر العمل.
التعليقات (0)
عرض المزيد.. جديد مقالاتي
عرض المزيد.. جديد دوراتي
لايوجد لديك حساب في عالم البرمجة؟
تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !