في تطوير الواجهات الأمامية الحديثة، يعتبر السعي وراء أساليب تصميم أنيقة وفعالة وسهلة الصيانة هدفًا أساسيًا لكل مطور. غالبًا ما تؤدي الطرق التقليدية لكتابة أكواد CSS إلى جعل ملفات الأنماط ضخمة وصعوبة في تسمية العTailwind CSSكإطار عمل للـ CSS يولي الأولوية للوظائف، فقد غير بشكل جذري طريقة بناء واجهات المستخدم لدينا من خلال توفير مجموعة من الفئات العملية والقابلة للتجميع. يسمح للمطورين بتطبيق الأنماط مباشرة في HTML باستخدام أسماء الفئات، مما يسهل عملية تصميم النماذج الأولية وتطوير واجهات المستخدم المخصصة بدرجة عالية، مع الحفاظ في الوقت نفسه على صغر حجم ملفات CSS.
سيقوم هذا الدليل بمرافقتك خطوة بخطوة، لتتعلم كيفية البدء من الصفر وإتقان…Tailwind CSSالمفاهيم الأساسية والممارسات المتعلقة بذلك، ستمكّن في النهاية من بناء واجهة مستخدم رائعة ومتجاوبة بشكل مستقل.
ما هو Tailwind CSS وما هي فلسفته الأساسية؟
Tailwind CSSليس مكتبة مكونات مغلفة مسبقًا (مثل Bootstrap)، بل إنه إطار عمل لغة CSS. فلسفته الأساسية هي “الوظيفة أولاً” (Utility-First)، وهذا يعني أنه لا يوفر مكونات أو أدوات تصميمية جاهزة للاستخدام مثل تلك الموجودة في مكتبات مثل Bootstrap.btnأوcardهذه الفئات المكونة ذات الطابع الدلالي لا تقدم سوى مجموعة كبيرة من الفئات العملية ذات المسؤوليات المحددة بدقة، مثل تلك المسؤولة عن التحكم في المسافات الهامشية (المارجينات).m-4تُستخدم للتحكم في لون النصوص.text-blue-500والتحكم في المرونةflex。
القراءة الموصى بها اكتشف القدرات الرائعة لـ Tailwind CSS: دليل من البدايات الأساسية إلى التطبيقات العملية。
ميزة هذه الطريقة تكمن في أنها تمنح المطورين مرونة وسيطرة كبيرتين. لا حاجة لكتابة كميات كبيرة من كود CSS ذو الدقة العالية لتغطية أنماط المكونات المحددة مسبقًا، ولا داعي للقلق بشأن معاني أسماء الفئات (classes). يتم تحديد جميع الأنماط من خلال مزيج من أسماء الفئات في HTML، مما يجعل أنماط واجهة المستخدم مرتبطة ارتباطًا وثيقًا بتركيبتها، مما يسهل فهمها وتعديلها. بالإضافة إلى ذلك،PurgeCSS(في الإصدار النهائي)، يمكن للإطار أن يقوم تلقائيًا بإزالة جميع ملفات CSS غير المستخدمة، مما يجعل حجم الملف النهائي صغيرًا جدًا.
إعداد البيئة وتهيئة المشروع (Environment Setup and Project Initialization)
لبدء الاستخدام، ما عليك سوى اتباع الخطوات الموضحة.Tailwind CSSأولاً، يجب دمجه في مشروعك. الطريقة الأكثر شيوعًا للقيام بذلك هي التثبيت باستخدام Node.js وnpm (أو yarn).
تثبيت Tailwind من خلال npm.
أولاً، قم بتهيئة بيئة npm في المجلد الرئيسي لمشروعك عبر سطر الأوامر، ثم قم بتثبيت الحزم اللازمة.Tailwind CSSوما يعتمد عليه. قم بإنشاء مجلد مشروع جديد وأجرِ الأوامر التالية:
npm init -y
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss initالأمر المذكور أعلاه سيقوم بالتثبيت.tailwindcss、postcss(يُستخدم لمعالجة ملفات CSS) وautoprefixer(يتم إضافة البريفيكس الخاص بالمتصفح تلقائيًا)، ويتم إنشاء ملف تكوين افتراضي.tailwind.config.js。
إنشاء ملف PostCSS وتكوينه
بعد ذلك، يجب عليك إنشاء ملف في المجلد الرئيسي للمشروع.postcss.config.jsالملف، وسيتم…tailwindcssوautoprefixerأضفه كمكون إضافي.
القراءة الموصى بها تحليل متعمق لإطار عمل Tailwind CSS: بناء واجهات استجابية حديثة من الصفر。
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}إدخال الأنماط الأساسية لـ Tailwind
ثم، في ملف CSS الرئيسي الخاص بك (على سبيل المثال…src/styles.cssأوsrc/input.cssفي هذا البرنامج، يتم استخدام@tailwindتتضمن التعليمات جميع طبقات الإطار.
/* src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;أخيرًا، يمكن معالجة ملف CSS هذا باستخدام أدوات بناء مثل Vite أو Webpack، أو يمكن استخدامه مباشرةً.npx tailwindcss -i ./src/input.css -o ./dist/output.css --watchهناك أمر يمكن استخدامه لتجميع ملفات CSS في الوقت الفعلي. في ملف HTML الخاص بك، يمكنك ربط هذا الأمر لتشغيل عملية التجميع والحصول على ملف CSS الناتج.output.cssيمكنك استخدام الملف فورًا.
الفئات الأساسية والعملية والتصميم التكيفي (Core Practical Classes and Responsive Design)
Tailwind CSSتغطي هذه الفئات العملية جوانب متعددة من لغة CSS، وقواعد التسمية فيها واضحة ومتسقة.
التخطيط والمسافات
تصنيفات التخطيط مثل…flex、grid、blockيُستخدم لتحديد وضع العرض. أما المسافات فتتم تحديدها عن طريق…m-{size}(المسافات الخارجية)p-{size}يتم التحكم في المسافات الداخلية (الهوامش الداخلية) باستخدام أرقام. عادةً ما تُستخدم أرقام محددة لتحديد الأبعاد.m-4المقابل1remكما يدعم النظام التشغيل التلقائي أيضًا.auto) والنسب المئوية.
الألوان والخلفية
يمكنك استخدامه.text-{color}-{shade}لتعيين لون النص، مثلاً…text-gray-800تم استخدام لون الخلفية…bg-{color}-{shade}مثلاً،bg-blue-100يوفر الإطار مجموعة غنية من درجات الألوان تتراوح بين 50 و900 درجة.
النقاط المحورية التفاعلية (Responsive Breakpoints)
التصميم التفاعلي هوTailwind CSSنقاط القوة الرئيسية لهذا الأداة: يوفر بشكل افتراضي 5 براعم (prefixes) لنقاط التوقف (breakpoints).sm: (640 بكسل)md: (768 بكسل)lg: (1024 بكسل)xl: (1280 بكسل)،2xl: (1536px). يمكنك إضافة هذه الرموز المسبقة أمام أي فئة (class) عملية، لتحديد الأنماط المناسبة لأحجام الشاشات المختلفة.
القراءة الموصى بها تعلم CSS باستخدام Tailwind من الأساسيات إلى الاحتراف: دليل شامل لبناء صفحات ويب استجابية حديثة。
على سبيل المثال.<div class="text-center md:text-left p-4 md:p-8">يعني ذلك أن النصوص على الأجهزة المحمولة تكون مركزة (موضوعة في وسط الشاشة) مع هوامش داخلية صغيرة، بينما على الشاشات المتوسطة والأكبر حجمًا تكون النصوص محاذية لليسار مع هوامش داخلية أكبر. هذه الاستراتيج
إنشاء مثال على شريط تنقل استجابي (responsive navigation bar)
دعونا نطبق المعرفة التي تمت مناقشتها من خلال مثال كامل على شريط تنقل متجاوب (responsive navigation bar). يتم طي هذا الشريط التنقل إلى قائمة هامبرغر (hamburger menu) على الأجهزة المحمولة، بينما يتم توسيعه أفقيًا على الشاشات الكب
أولاً، قم بكتابة الهيكل الأساسي للصفحة باستخدام لغة HTML، ثم قم بتطبيق العناصر والخصائص المطلوبة عليه.Tailwind CSSإنها فئة عملية.
<nav class="bg-gray-800 shadow-lg">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<!-- 网站Logo -->
<div class="flex-shrink-0">
<a href="#" class="text-white font-bold text-xl">موقعي الإلكتروني</a>
</div>
<!-- 桌面端导航链接 (默认隐藏，在中等屏幕显示) -->
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">شكل البداية</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">حول</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">الخدمة</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">الاتصال</a>
</div>
</div>
<!-- 移动端菜单按钮 -->
<div class="md:hidden">
<button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">
<!-- 汉堡菜单图标 (简化SVG) -->
<svg class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
</div>
</div>
</div>
<!-- 移动端下拉菜单 (默认隐藏) -->
<div class="md:hidden hidden" id="mobile-menu">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">شكل البداية</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">حول</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">الخدمة</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">الاتصال</a>
</div>
</div>
</nav>
<script>
// 简单的JavaScript用于切换移动菜单
document.getElementById('mobile-menu-button').addEventListener('click', function() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
});
</script>في هذا المثال، استخدمنا:
الخلفية والظلال:bg-gray-800 shadow-lg
أقصى عرض ومركز أفقي:max-w-7xl mx-auto
الهوامش الداخلية التفاعلية:px-4 sm:px-6 lg:px-8
التخطيط المرن:flex, justify-between, items-center
العرض/الإخفاء التفاعلي:hidden md:block و md:hidden
تأثير التعليق:hover:bg-gray-700 hover:text-white
من خلال دمج هذه الفئات، تمكنا من بناء شريط تنقل استجابي (responsive navigation bar) يتمتع بميزات كاملة وتصميم عصري، دون الحاجة إلى كتابة أي سطر واحد من كود CSS مخصص.
الملخصات
Tailwind CSSمن خلال مفهومها القائم على ترتيب الأولويات في الوظائف، تم رفع مستوى المرونة والكفاءة في بناء الأنماط إلى مستويات جديدة. قد يبدو الأمر في البداية وكأنه يتطلب كتابة العديد من أسماء الفئات (classes) داخل HTML، ولكن بمجرد التعود عليه، ستجد أن سرعة التطوير والاتساق سيكونان مكافأة كبيرة. بدءًا من إعداد البيئة واستخدام الفئات الأساسية العملية، مرورًا بتطبيق نقاط الاستجابة (response breakpointsTailwind CSSتم توفير مجموعة أدوات كاملة وقابلة للتنبؤ للمطورين.
من خلال التدريبات في هذا الدليل، يجب أن تكون قد أتقنت بالفعل كيفية استخدام…Tailwind CSSقم بتشغيل المشروع وإنشاء الأساس لواجهة المستخدم التفاعلية (UI) المتكيفة مع أحجام الشاشات المختلفة. بعد ذلك، يمكنك استكشاف الميزات الأكثر تقدمًا مثل الإعدادات الخاصة، نظام الإضافات (plugins)، دعم و@applyمكون استخراج الأوامر، مما يسمح بدمجه بشكل أكثر كفاءة في سير عملك.
الأسئلة الشائعة الأسئلة المتداولة
هل يجعل Tailwind CSS لغة HTML تبدو فوضوية؟
بالفعل، قد يجد المبتدئون أن HTML مليء بأسماء الفئات (classes)، مما يجعل الكود يبدو معقدًا ومطولًا. لكن في الواقع، هذا يساعد على تركيز منطق تنسيق العرض (styles) في طبقة العرض (view layer)، مما يتجنب الحاجة إلى التنقل المتكرر بين ملفات HTML وCSS. مع مرور الوقت واكتساب الخبرة في استخدام الأدوات المتاحة، ستتحسن كفاءة القراءة بشكل كبير. بالنسبة لمج@applyتم استخراج التعليمات في CSS كفئات للمكونات (component classes)، وذلك للحفاظ على بساطة كود HTML.
كيف يمكن تخصيص الموضوع الافتراضي لـ Tailwind CSS (مثل الألوان والمسافات بين العناصر)؟
يتم التخصيص بشكل أساسي عن طريق تعديل الملفات الموجودة في المجلد الرئيسي للمشروع.tailwind.config.jsتنفيذ الملفات: يمكنك القيام بذلك من خلال هذا الملف الخاص بالإعدادات.themeيمكن توسيع القيم الافتراضية أو تغييرها داخل الكائنات. على سبيل المثال، إذا أردت إضافة لون مخصص، فيمكنك ذلك عن طريق…theme.extend.colorsيتم تعريف الإطار (framework) أدناه. إعدادات الإطار مرنة للغاية، مما يسمح لك بتخصيص نظام التصميم بشكل عميق حسب احتياجاتك.
هل ستكون ملفات CSS الناتجة من Tailwind CSS ضخمة الحجم؟
لا. هذا بالضبط ما يجب أن يحدث.Tailwind CSSإنها ميزة كبيرة. خلال عملية بناء المنتجات، فإنها تعمل بالتعاون مع…PurgeCSSتعمل هذه الأداة بالتعاون مع محرك التجميع الديناميكي (JIT) الخاص بها، لتحليل ملفات مشروعك بشكل ذكي (مثل HTML، JSX، قوالب Vue، إلخ)، وتقوم فقط بتضمين الفئات (classes) من ملف CSS التي تم استخدامها في الملف النهائي الخاص بالتطبيق. ونتيجة لذلك، عادةً ما يتم إنشاء ملف CSS صغير جدًا الحجم
هل يمكن استخدامه مع إطارات عمل الواجهة الأمامية مثل React وVue؟
يمكن ذلك تمامًا.Tailwind CSSإنه إطار عمل CSS مستقل، غير مرتبط بأي إطار عمل لطبقات العرض (view layer frameworks) يدعم استخدام CSS. سواء كنت تعمل على مشاريع باستخدام React، Vue، Angular، أو Svelte، يمكنك تثبيته وتكوينه بنفس الخطوات. من الشائع جدًا والفعال أيضًا استخدام أسماء الكلاسات الخاصة به مباشرة داخل المكونات الفردية (single files components) في React/Vue أثناء التطوير.
ما التالي، ما التالي؟
القراءة الموسعة والمعرفة العملية
فيما يلي بعض الموضوعات ذات الصلة بموضوع هذه المقالة وهي مناسبة لمزيد من القراءة المتعمقة. وغالباً ما يكون من الأفضل إعطاء الأولوية للبدء بالمقال الأقرب إلى مشكلتك الحالية ثم التوسع تدريجياً إلى المواضيع المحيطة.
- بناء المواقع الإلكترونية: دليل تقني شامل لإنشاء مواقع مهنية من الصفر
- لبناء موقع ووردبريس جميل وقوي من الناحية الوظيفية، من الضروري استخدام قالب (Theme) مناسب.
- دليل شامل لعملية بناء المواقع الإلكترونية: تحليل خطوات كاملة من الصفر إلى الإطلاق المهني
- إتقان أساسيات Tailwind CSS: دليل تطوير الواجهات الأمامية الحديثة من الفئات العملية إلى التصميم التفاعلي
- دليل تقني وأفضل الممارسات لإتقان كامل عملية بناء المواقع الإلكترونية: من الصفر حتى النشر الفعلي
العربية