نهج Tailwind CSS القائم على الأدوات أولًا
طبّق فئات الأدوات الجاهزة مباشرةً في HTML، وخصّص السمة في tailwind.config.js، واستخدم @apply لاستخراج الأنماط المتكررة.
نهج Tailwind CSS القائم على الأدوات أولًا درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ما هي CSS المعتمدة على الأدوات؟
يوفّر Tailwind CSS أصناف أدوات مُعدّة مسبقًا لكل خاصية CSS. وبدلًا من كتابة CSS مخصّصة، تركّب الأنماط بإضافة أصناف الأدوات مباشرةً في HTML. صنف واحد = تصريح CSS واحد.
تثبيت Tailwind
ثبّت Tailwind وابدأ إعدادات التهيئة. تستخدم مشاريع Vite إضافة Tailwind الخاصة بـ Vite أو إضافة PostCSS.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
# Or with Vite plugin:
npm install -D @tailwindcss/viteأصناف الأدوات عمليًا
أنشئ بطاقة باستخدام أصناف أدوات Tailwind فقط. لا حاجة إلى ملف CSS مخصّص.
<div class="bg-white rounded-lg shadow-md p-6 max-w-sm">
<img class="w-full h-48 object-cover rounded-md mb-4" src="..." alt="...">
<h2 class="text-xl font-semibold text-gray-800">Card Title</h2>
<p class="text-gray-500 mt-2">Card description goes here.</p>
<button class="mt-4 w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition-colors">
Read More
</button>
</div>البوادئ المتجاوبة
أضف بوادئ نقاط التوقف المتجاوبة. تُطبَّق md: على الشاشات المتوسطة وما فوقها. وتُطبَّق lg: على الشاشات الكبيرة. يعتمد Tailwind نهج البدء بالهاتف المحمول.
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">متغيرات الحالة
ضع بادئات متغيرات الحالة أمام الأصناف: hover: وfocus: وactive: وdisabled: وdark:.
<button class="bg-blue-600 hover:bg-blue-700 focus:ring-2 focus:ring-blue-400 disabled:opacity-50 disabled:cursor-not-allowed">تهيئة السمة
خصّص الألوان والمسافات والخطوط ونقاط التوقف في tailwind.config.js. وسّع السمة الافتراضية أو استبدل أجزاءً منها.
// tailwind.config.js
export default {
theme: {
extend: {
colors: {
brand: { 500: '#6366f1', 600: '#4f46e5' }
},
fontFamily: {
sans: ['Inter', ...defaultTheme.fontFamily.sans]
}
}
}
}@apply — استخراج الأنماط المتكررة
استخدم @apply في ملفات CSS لتركيب أصناف الأدوات في قاعدة CSS قابلة لإعادة الاستخدام. استخدمه باعتدال، إذ تُفضَّل أصناف الأدوات المباشرة في معظم الحالات.
/* Only for highly repeated patterns */
@layer components {
.btn-primary {
@apply px-4 py-2 bg-indigo-600 text-white rounded-md
hover:bg-indigo-700 transition-colors font-medium;
}
}إزالة CSS غير المستخدمة
ينشئ Tailwind آلافًا من أصناف الأدوات. وفي بيئة الإنتاج، يفحص ملفات المصدر ويزيل كل صنف غير مستخدم، ما ينتج ملفات CSS صغيرة جدًا، غالبًا أقل من 10 كيلوبايت.
Tailwind مع React وVue
في React، استخدم cn() (clsx + twMerge) لتطبيق أصناف Tailwind شرطيًا دون تعارضات. وفي Vue، استخدم روابط :class.
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
function cn(...classes: string[]) { return twMerge(clsx(classes)); }
<div className={cn('rounded-lg p-4', featured && 'border-2 border-indigo-600')}>Tailwind IntelliSense
ثبّت إضافة Tailwind CSS IntelliSense لـ VSCode للحصول على الإكمال التلقائي، ومعاينة اسم الصنف عند تمرير المؤشر، وفحص الأصناف غير المعروفة. وستحسّن هذه الإضافة تجربة تطوير Tailwind بدرجة كبيرة.
انتقادات Tailwind والدفاع عنها
المنتقدون: يصبح HTML مزدحمًا بكثرة الأصناف، ما يصعّب قراءته. أما الدفاع عنها: فلن تكتب CSS مطلقًا، وتكون جميع الأنماط في مكان المكوّنات، ويُفرض نظام التصميم من خلال الإعدادات. وتبلغ معظم الفرق التي تستخدم Tailwind باستمرار عن إنتاجية أعلى.
تحقق سريع
كيف يتعامل Tailwind مع حجم حزمة الإنتاج، مع أنه ينشئ آلافًا من أصناف الأدوات؟
مراجعة: Tailwind CSS
النهج المعتمد على الأدوات: صنف واحد = خاصية CSS واحدة. لا حاجة إلى CSS مخصّصة في معظم الحالات. بوادئ متجاوبة وبوادئ للحالات مثل md: وhover:. خصّص الإعدادات باستخدام tailwind.config.js. استخدم @apply للأنماط المتكررة. يفحص إصدار الإنتاج الأصناف غير المستخدمة ويزيلها. استخدم cn() مع twMerge للأصناف الشرطية في React. ثبّت إضافة IntelliSense.
الأسئلة الشائعة
هل درس «نهج Tailwind CSS القائم على الأدوات أولًا» مجاني؟
نعم — نص درس «نهج Tailwind CSS القائم على الأدوات أولًا» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «نهج Tailwind CSS القائم على الأدوات أولًا»؟
طبّق فئات الأدوات الجاهزة مباشرةً في HTML، وخصّص السمة في tailwind.config.js، واستخدم @apply لاستخراج الأنماط المتكررة. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «نهج Tailwind CSS القائم على الأدوات أولًا»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- منهجية BEM: Block وElement وModifier
- وحدات CSS: أسماء الفئات ذات النطاق المحدد
- CSS-in-JS: Styled-components وEmotion
- نهج Tailwind CSS القائم على الأدوات أولًا