ابدأ باستخدام Tailwind CSS عند الحاجة إلى استخدام هذا المكون، يجب أولاً دمجه في مشروعك. الطريقة الأكثر شيوعاً للقيام بذلك هي تثبيته عبر أداة إدارة الحزم (package management tool). إذا كنت تستخدم… npm أو yarnيمكن إضافته بسهولة كاعتماد تطويري (development dependency). بعد الانتهاء من التثبيت، يتم عادةً تكوين الإعدادات الأساسية من خلال أداة تُسمى… tailwind.config.js يتم ذلك باستخدام ملف الإعدادات (configuration file). في هذا الملف، يمكنك تحديد جوانب نظام التصميم الخاص بك، مثل ألوان الثيمات، الخطوط، نسب المسافات، وغيرها، لتخصيصها بحيث تتناسب مع أسلوب مشروعك. Tailwind CSS الإصدار.
لكي يتم استخدامه في المشروع Tailwind CSSيجب عليك إدخال التعليمات الخاصة به في ملف CSS الرئيسي الخاص بك. عادةً ما يتم تسمية هذا الملف… input.css أو styles.cssمن خلال @tailwind التعليمات… يمكنك إدخالها. Tailwind CSS الأساليب الأساسية، فئات المكونات، وفئات الأدوات. بعد ذلك، تحتاج إلى عملية بناء (مثل استخدام PostCSS) لمعالجة ملف CSS هذا وإنتاج جدول الأنماط النهائي الذي سيتم استخدامه في بيئة الإنتاج.
قد تبدو هيكلية مشروع بسيطة كما يلي:
القراءة الموصى بها الإلمام الشامل بـ Tailwind CSS: دليل لإطار عمل CSS الحديث من المبادئ الأساسية إلى التطبيق العملي。
your-project/
├── src/
│ ├── styles/
│ │ └── input.css
│ └── index.html
├── tailwind.config.js
├── package.json
└── postcss.config.jsفي ما يخصك… input.css في الملف، يكون المحتوى عادةً كالتالي:
@tailwind base;
@tailwind components;
@tailwind utilities;هذه العملية تضمن لك القدرة على الوصول إلى المحتوى المطلوب. Tailwind CSS جميع الفئات العملية المقدمة.
المفاهيم الأساسية والفئات العملية
Tailwind CSS جوهر هذا الأسلوب هو مفهوم “الاستخدام أولاً” (Utility-First). وهذا يعني أنك تقوم ببناء الأنماط مباشرة عن طريق دمج عدد كبير من الكلاسات الصغيرة ذات الاستخدامات المحددة، بدلاً من كتابة قواعد CSS تقليدية أو إنشاء كلاسات مكونات مخصصة. يتيح لك هذا الأسلوب إجراء تحديثات سريعة على التصميم والحفاظ على صغر حجم ملفات الأنماط.
فهم تسمية الفئات العملية (Practical Class Names)
أسماء الكلاسات العملية (البرمجية) تتبع نمطًا منتظمًا جدًا، وعادة ما تكون على الشكل “الخاصية-القيمة” أو “الخاصية-نقطة التوقف-القيمة”. على سبيل المثال،text-blue-500 يعني ذلك تعيين لون النص إلى الدرجة رقم 500 من نطاق ألوان اللون الأزرق.p-4 يعني ذلك تطبيق هامش داخلي (padding) قدره 4 وحدات في جميع الاتجاهات. md:p-6 وهذا يعني أنه في حالة استخدام شاشات بحجم متوسط (md) أو أكبر، سيتم تغيير المسافة الداخلية (البادج) إلى 6 وحدات.
هذه الطريقة في التسمية تجعل منحنى التعلم أكثر انخفاضًا وسلاسة؛ فبمجرد أن تتقن الأنماط الأساسية للتسمية، ستتمكن من استنتاج وظائف معظم الفئات. على سبيل المثال، إذا كنت تعرف… m-2 إذا كان الأمر يتعلق بالهوامش الخارجية (margin margins)، فإن… mt-2`(margin-top)`mx-auto(المسافة الخارجية التلقائية في الاتجاه الأفقي) من السهل جدًا فهمها.
القراءة الموصى بها دليل نهائي لـ Tailwind CSS: من المبتدئين إلى المحترفين، لإنشاء صفحات ويب حديثة ومتجاوبة。
تصميم متجاوب
التصميم التفاعلي مدمج بشكل أساسي في… Tailwind CSS موجود في الجينات. يوفر الإطار بشكل افتراضي خمس نقاط توقف (breakpoints):sm、md、lg、xl、2xlلتطبيق أسلوب معين على نقطة توقف معينة، ما عليك سوى إضافة بادئة نقطة التوقف وعلامة الفاصلة (%) قبل الفئة المستخدمة. على سبيل المثال:<div class="“text-sm" md:text-base lg:text-lg”> سيتم إنشاء نص يظهر بخط صغير على الشاشات الصغيرة، وبخط عادي على الشاشات المتوسطة، وبخط كبير على الشاشات الكبيرة. لا حاجة لكتابة أي استعلامات وسائط (media queries)، حيث يتم التعامل مع كل المتطلبات التكيفية عبر أسماء الفئات (class names).
إنشاء تصميم واجهة مستجيب (Responsive Design)
الاستفادة من Tailwind CSS إن إنشاء تخطيطات مرنة أمر سهل وفعال في نفس الوقت. توفر الأطر أدوات قوية لبناء واجهات استجابية تتراوح من البسيطة إلى المعقدة.
استخدام تقنيات Flexbox و Grid لتنظيم عناصر الواجهة البرمجية بشكل مرن وسهل.
بالنسبة للتخطيط أحادي الأبعاد، يمكنك استخدام الطرق المتاحة مباشرةً. flex、flex-col、items-center、justify-between يمكن استخدام فئات مماثلة لتنفيذ تخطيط Flexbox بسرعة. أما بالنسبة للتخطيط ثنائي الأبعاد الأكثر تعقيدًا،grid、grid-cols-3、gap-4 تسمح لك هذه الفئات (categories) بالتحكم بسهولة في أنظمة تنسيق الصفحات باستخدام CSS Grid.
على سبيل المثال، من السهل جدًا إنشاء تخطيط يتكون من ثلاثة أعمدة يتم ترتيبها بشكل عمودي على الأجهزة المحمولة وبشكل أفقي على أجهزة الكمبيوتر المكتبية:
<div class="“container" mx-auto p-4”>
<div class="“flex" flex-col md:flex-row gap-4”>
<div class="“md:w-1/3" p-4 bg-gray-100 rounded-lg”>القسم الأول</div>
<div class="“md:w-1/3" p-4 bg-gray-100 rounded-lg”>القسم الثاني</div>
<div class="“md:w-1/3" p-4 bg-gray-100 rounded-lg”>القسم الثالث</div>
</div>
</div>في الشفرة المذكورة أعلاه،container توفر الفئة (class) حاوية مركزية مع قيود على الحد الأقصى لعرضها (width).flex-col في الحالة الافتراضية (للأجهزة المحمولة)، يتم إنشاء ترتيب عمودي للعناصر. md:flex-row في الشاشات متوسطة الحجم والأكبر، يتم تغيير ترتيب العناصر لتكون أفقية.gap-4 إضافة مسافة بين العناصر الفرعية.
معالجة الحاويات والمسافات (Handling Containers and Spacing)
Tailwind CSS نظام المسافات يعتمد على نسبة قابلة للتكوين (القيمة الافتراضية هي مضاعفات 4 بكسل، مثل 1 تساوي 0.25 ريم). هذا يجعل من السهل جدًا الحفاظ على إيقاع موحد في جميع الخصائص مثل المارجين (margin)، والبادينج (padding)، والجاب (gap)، والعرض (width)، والارتفاع (height)، وما إلى ذلك. p-6、m-2、space-x-4 مع مثل هذه الفئات، يمكنك التحكم بدقة في العلاقات المكانية بين العناصر وداخل العناصر نفسها، دون الحاجة إلى التفكير المتكرر في قيم البكسلات.
القراءة الموصى بها ما الذي يجعل Tailwind CSS الإطار الأولي المفضل في تطوير الواجهات الأمامية الحديثة؟。
التخصيص والميزات المتقدمة
على الرغم من أن Tailwind CSS جاهز للاستخدام فور الفتح، لكن قوته الحقيقية تكمن في قابليته العالية للتخصيص؛ يمكن تعديل تقريبًا كل القيم الافتراضية عن طريق ملفات الإعدادات.
تكوين رمز التصميم (Configuration Design Token)
في tailwind.config.js في الملف، يمكنك توسيع أو تغيير الإعدادات الافتراضية للتصميم الخاص بالموقع. على سبيل المثال، يمكنك إضافة ألوان العلامة التجارية، تخصيص مجموعات الخطوط، تعديل قيم نقاط الاختراق (breakpoints)، أو إ
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
‘brand-blue’: ‘#1d4ed8’,
},
fontFamily: {
‘sans’: [‘Inter’, ‘system-ui’, ‘sans-serif’],
},
},
},
// ... 其他配置
}بعد إكمال الإعدادات، يمكنك استخدامه مباشرةً كما لو كان… text-brand-blue أو font-sans هذا النوع من الفئات… طريقة إدارة الرموز (tokens) في التصميم تركز قرارات التصميم في مكان واحد، مما يضمن التناسق البصري للمشروع بأكمله.
إنشاء مكونات قابلة لإعادة الاستخدام
على الرغم من أن الجانب العملي يأتي في المقام الأول، إلا أنه لا يزال بإمكانك القيام بذلك… @apply يمكن استخدام نمط الكلاسات العملية المتكررة لاستخراج التعليمات وإنشاء فئات CSS مخصصة. هذا مفيد جدًا عندما لديك مجموعات من الأنماط المعقدة التي تظهر بشكل متكرر في عدة أماكن.
/* 在你的 CSS 文件中 */
.btn-primary {
@apply px-4 py-2 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50;
}بعد ذلك، يمكنك استخدامها في HTML. <button class=“btn-primary”>يرجى ملاحظة أن…Tailwind CSS التوصية الرسمية هي استخدام هذا المنتج بحذر. @applyيُفضل دائمًا دمج الكلاسات العملية مباشرةً داخل HTML للحفاظ على سهولة الصيانة. أما بالنسبة للمكونات الحقيقية والمعقدة من الناحية المنطقية، فيجب استخدام آليات المكونات المتاحة في إطارات العمل بلغة JavaScript مثل React أو Vue لتغليفها.
تحسين الأداء ونشر النظام في البيئة الإنتاجية
عند اكتمال تطوير المشروع، ستحتاج إلى تحسين ملفات الأنماط (style files) لتتناسب مع بيئة الإنتاج (production environment).Tailwind CSS سيتم إنشاء عدد كبير من الكلاسات العملية، ولكن من المحتمل جدًا أن يتم استخدام جزء فقط منها في مشروعك. نشر الملفات غير المحسنة مباشرة سيؤدي إلى وجود كمية كبيرة من الكود غير المفيد.
استخدم أداة PurgeCSS لتنفيذ عملية “Shaking the Tree” (تنظيف الملفات الثقيلة أو غير الضرورية).
عند بناء النسخة النهائية المخصصة للاستخدام الفعلي (النسخة الإنتاجية)،Tailwind CSS سيتم التعامل معها. PurgeCSSتم دمجه في الإصدارات الأحدث. tailwindcss يعمل هذا الأداة بشكل تلقائي ومتزامن مع ملفات HTML ومكونات JavaScript وملفات القوالب الأخرى لديك. يقوم بمسح أسماء الفئات (classes) التي تستخدمها فعليًا في كودك، ثم يزيل جميع الأنماط (styles) غير المستخدمة. نتيجة لذلك، يمكن أن ينخفض حجم ملف CSS النهائي بشكل كبير، من عدة ميغابايت إلى بضع كيلوبايتات أو حتى عشرات الكيلوبايتات.
عادةً ما يتم إجراء التكوين… tailwind.config.js تم إكمال العمل في الوسط:
module.exports = {
purge: [‘./src/**/*.{html,js,jsx,ts,tsx,vue}’],
// ... 其他配置
}يجب عليك تحديد مسارات جميع الملفات المصدرية التي تحتوي على أسماء فئاتك (classes)، وسيقوم أداة البناء (build tool) بمعالجتها تلقائيًا.
تفعيل وضع JIT (Just-In-Time Compilation)
ابتداءً من إصدار معين،Tailwind CSS تم إدخال محرك التجميع في الوقت المناسب (Just-In-Time، JIT). في وضع JIT، يتم إنشاء الأنماط حسب الحاجة، بدلاً من إنشاء جدول أنماط ضخم يحتوي على جميع الفئات الممكنة مسبقًا. وهذا يعني أن…
١. سرعة عملية التطوير والبناء سريعة للغاية.
٢. يمكنك استخدام أي قيمة تريدها. top-[-113px] أو text-[#1d4ed8]وذلك دون الحاجة إلى تعريفها مسبقًا في الإعدادات.
٣. عملية البناء والإنتاج في جوهرها تتم حسب الحاجة، ولذلك لا يوجد ضرورة لاستخدام أنظمة معقدة. purge التكوين، والأداء ممتازان أيضًا.
لتفعيل وضع JIT، ما عليك سوى تغيير الإعدادات في ملف الكونفيغراتشن. mode تم تعيينها كـ ‘jit’وأحدد مسار ملف المصدر الخاص بك.
الملخصات
Tailwind CSS لقد غيرت هذه المنهجية العملية بشكل جذري طريقة تطوير واجهات المستخدم من قبل المطورين. فقد نقلت عملية اتخاذ قرارات التصميم من ملفات CSS إلى HTML أو القوالب، مما أدى إلى تحقيق سرعة تطوير مذهلة وتناسق عالٍ في التصميم. بدءًا من التثبيت السريع وفهم نظام الفئات الأساسية، مرورًا ببناء تخطيطات استجابية معقدة، وصولاً إلى تخصيص أنظمة التصميم بعمق وتحسين أداء النظام أثناء التشغيل.Tailwind CSS تم توفير مجموعة كاملة وفعالة وقابلة للتوسع من الأدوات. إتقان هذه المجموعة يعني أنك ستتمكن من التركيز بشكل أكبر على إنشاء واجهات تجمع بين الوظائف المطلوبة والجمالية، دون الحاجة إلى إهدار الكثير من الوقت في تصميم هياك
الأسئلة الشائعة الأسئلة المتداولة
هل سيؤدي وجود العديد من أسماء الفئات (classes) التي يولدها Tailwind CSS إلى جعل ملف HTML ضخمًا أو غير مرن في الاستخدام؟
نعم، هذه ميزة شائعة في أطر العمل التي تعطي الأولوية للجانب العملي (practicality). وهذا ينطبق بشكل خاص على عناصر HTML. class قد تصبح الخصائص (properties) طويلة جدًا، ولكن غالبًا ما يتم اعتبار ذلك جزءًا من التوازن اللازم في عملية التطوير. على الرغم من أن حجم ملفات HTML قد يزداد قليلاً، إلا أن ملفات CSS تصبح صغيرة جدًا بعد تطبيق تقنيات التحسين المناسبة، مما يسرع من عملية تحليل HTML بواسطة المتصفحات. يعتقد العديد من المطورين أن هذا الزيادة في حجم الملفات مقبولة تمامًا مقارنة بالسرعة في التطوير وسهولة الصيانة والمرونة التي توفرها هذه الخصائص. في أطر العمل المكونة (مثل React وVue)، يمكن تغليف هذه الخصائص داخل المكونات، مما يجعل الكود النهائي أكثر بساطة وسهولة في الاستخدام
كيف يمكن تغطية أو إعادة تعيين أنماط Tailwind للمكونات الخارجية (الطرفية)؟
عند البدء في الاستخدام… Tailwind CSS عند استخدام مكتبات المكونات التابعة لجهات خارجية، يمكن أن تحدث تضاربات في الأسلوب. هناك عدة استراتيجيات يمكن استخدامها للتعامل مع ذلك: 1. زيادة التحديد: استخدم فئات أو محددات أكثر تحديدًا لتغليف أسلوبك. 2. استخدم !importantأضف بعد الفئات العملية (practical classes): ! الرموز الأمامية، مثل… bg-red-500!(في وضع JIT)، ولكن يجب استخدام هذا بحذر. 3. قم بتعديل الترتيب في الإعدادات: تأكد من أن ملفات CSS الخاصة بك تتم إضافتها بعد ملفات CSS الخاصة بمكتبة المكونات. 4. والطريقة الأساسية هي، إذا سمحت لك مكتبة المكونات، أن تقوم بتضمين ملفات CSS الخاصة بها ضمن ملفاتك الخاصة. Tailwind CSS تم إدخال هذا الجزء كجزء من النمط “الأساسي”، بحيث يمكن لفئاتك العملية (practical classes) أن تعتمد على نفس رموز التصميم (design tokens) وتتمتع بأولوية أعلى.
ما هي الإطارات الأمامية (front-end frameworks) التي يناسب استخدامها مع Tailwind CSS؟
Tailwind CSS إنه إطار عمل CSS يتناسب بشكل مثالي مع أي تقنية أمامية قادرة على إنتاج HTML. وهو شائع بشكل خاص مع إطارات العمل والمكتبات الحديثة للجافا سكريبت مثل React، Vue.js، Angular، Svelte، وNext.js. نماذج مكونات هذه الإطارات تتوافق بشكل جيد مع إطار عمل CSS. Tailwind CSS طرق دمج الكلاسات العملية مع بعضها تعزز من فعالية النظام، حيث يمكنك تغليف الأنماط والهياكل معًا داخل مكونات واحدة. كما توفر الشركة المطورة إضافات وأدوات متكاملة مخصصة لأطر عمل مثل React وVue، لتحسين تجربة التطوير بشكل أكبر.
في مشاريع الفريق، كيف يمكن الحفاظ على توحيد استخدام أسماء الكلاسات (class names) في بيئة Tailwind CSS؟
للحفاظ على الاتساق، هناك بعض المعايير والأدوات الضرورية. أولاً، من المهم استخدامها بشكل فعال. tailwind.config.js الملفات تسمح بإدارة عناصر التصميم مثل ألوان العلامة التجارية والمسافات بين العناصر وأنواع الخطوط بشكل مركزي، مما يضمن استخدام الجميع لنفس نظام التصميم. بالإضافة إلى ذلك، يمكن استخدام إضافات لمحررات النصوص (مثل Tailwind CSS IntelliSense)، والتي توفر ميزات مثل التكملة التلقائية للكود وعرض معاينات للتصميم عند وضع المؤشر فوق الكلمات المطلوبة، مما يقلل من عبء التذكر واحتمالات الأخطاء الإملائية. أما بالنسبة للت @apply قم باستخراج بعض الكلاسات المكونات المعترف بها على نطاق واسع والتي يتم استخدامها بشكل متكرر (مثل الأزرار، البطاقات)، أو قم بإنشاء كلاسات إطار عمل مقابلة لها مباشرة. بالإضافة إلى ذلك، استخدم prettier-plugin-tailwindcss يمكن أن يتم ذلك تلقائيًا. class قم بترتيب أسماء الفئات (class names) الموجودة داخل الخصائص (properties) لتوحيد أسلوب الكود (code style).
ما التالي، ما التالي؟
القراءة الموسعة والمعرفة العملية
فيما يلي بعض الموضوعات ذات الصلة بموضوع هذه المقالة وهي مناسبة لمزيد من القراءة المتعمقة. وغالباً ما يكون من الأفضل إعطاء الأولوية للبدء بالمقال الأقرب إلى مشكلتك الحالية ثم التوسع تدريجياً إلى المواضيع المحيطة.
- تحليل شامل للعمليات الأساسية في بناء المواقع الإلكترونية: دليل متخصص من الصفر إلى الواحد
- كيفية اختيار وتخصيص قالب ووردبريس الخاص بك: دليل شامل من المبتدئين إلى الخبراء
- دليل نهائي لبناء المواقع الإلكترونية: العملية الكاملة لإنشاء موقع إلكتروني محترف من الصفر
- دليل شامل للبدء في استخدام Tailwind CSS: التعرف على إطار عمل CSS المجزأ (Atomic CSS) من الصفر إلى الاحتراف
- دليل شامل لعملية بناء المواقع الإلكترونية: من البداية إلى النشر الفعلي، مع استراتيجيات التطوير والتحسين
العربية