الدرس 8 · الوحدة 3: تنفيذ التصميم المتجاوب
Tailwind CSS: التنسيق بالأصناف الجاهزة
تنسيق سريع ومتسق دون مغادرة المكوّن. ⏱ نحو 30 دقيقة.
بعد هذا الدرس ستستطيع أن:
- تشرح فكرة الأصناف الخدمية وتقارنها بـ
CSSوBootstrap. - تستخدم أصناف المسافات والألوان والنص والتخطيط والحالات.
- تبني مكوّنات
Reactبأشكال متعددة عبر الخصائص. - تثبّت
Tailwindفي مشروعVite.
١فكرة «الأصناف الخدمية»
في مقرر 131 كتبت CSS في ملف منفصل بأصناف تسميها بنفسك (.card)، ثم جرّبت Bootstrap بمكوّناته الجاهزة (.btn .btn-primary). أما Tailwind CSS فيقدّم أصنافًا صغيرة جدًّا، كل صنف يفعل شيئًا واحدًا، وتركّبها مباشرة في JSX:
| CSS عادي | Bootstrap | Tailwind | |
|---|---|---|---|
| الأسلوب | تكتب القواعد بنفسك | مكوّنات جاهزة الشكل | أصناف صغيرة تركّبها |
| مثال زر | .buy { padding:8px; … } | class="btn btn-primary" | className="px-4 py-2 rounded-lg bg-sky-600 text-white" |
| التخصيص | كامل | محدود بالسمة | كامل دون مغادرة JSX |
| حجم CSS النهائي | حسب ما تكتب | كبير | صغير: يولّد فقط الأصناف التي استخدمتها |
export default function App() { return ( <div className="max-w-sm p-4 rounded-2xl bg-white shadow-lg border border-slate-200"> <h2 className="text-xl font-bold text-slate-800">قهوة عربية</h2> <p className="text-slate-500 mt-1">محمّصة يوميًّا في المدينة المنورة.</p> <div className="flex items-center justify-between mt-4"> <span className="text-2xl font-extrabold text-emerald-600">35 ﷼</span> <button className="px-4 py-2 rounded-lg bg-sky-600 text-white hover:bg-sky-700">أضف للسلة</button> </div> </div> );}
مرّر الفأرة على الزر: hover:bg-sky-700 يغيّر لونه عند المرور. لا ملف CSS في هذا المثال إطلاقًا.
٢قاموس الأصناف الأساسية
أسماء الأصناف منطقية، وتعتمد مقياسًا ثابتًا: الرقم 1 = 0.25rem (4 بكسل)، فـ p-4 = 16 بكسل:
| المجال | أمثلة | المعنى |
|---|---|---|
| المسافات | p-4 px-2 py-1 m-3 mt-2 gap-4 | حشو وهامش وفجوة: p حشو، m هامش، x أفقي، y رأسي، t أعلى |
| المسافات المنطقية (للعربية) | ps-4 pe-2 ms-auto | s بداية السطر و e نهايته؛ تعمل صحيحًا مع RTL |
| الألوان | bg-sky-100 text-slate-800 border-emerald-500 | لون + درجة من 50 (فاتح) إلى 950 (داكن) |
| النص | text-sm text-xl font-bold text-center | الحجم والوزن والمحاذاة |
| الحدود | border rounded-lg rounded-full shadow-md | إطار وزوايا وظل |
| التخطيط | flex items-center justify-between grid grid-cols-3 | Flexbox و Grid كما في CSS |
| الحالات | hover:bg-sky-700 focus:ring-2 disabled:opacity-50 | تنسيق عند المرور أو التركيز أو التعطيل |
const levels = [ { name: 'مبتدئ', color: 'bg-emerald-100 text-emerald-800' }, { name: 'متوسط', color: 'bg-amber-100 text-amber-800' }, { name: 'متقدم', color: 'bg-rose-100 text-rose-800' },]; export default function App() { return ( <div className="flex flex-wrap gap-2 p-2"> {levels.map(l => ( <span key={l.name} className={'px-3 py-1 rounded-full text-sm font-semibold ' + l.color}> {l.name} </span> ))} </div> );}
٣Tailwind و React: الأصناف حسب الحالة والخصائص
قوة Tailwind تظهر مع المكوّنات: الصنف يُبنى من الخصائص والحالة. هذا زر واحد بأشكال متعددة:
import { useState } from 'react'; const styles = { primary: 'bg-sky-600 text-white hover:bg-sky-700', danger: 'bg-rose-600 text-white hover:bg-rose-700', ghost: 'bg-transparent text-slate-700 border border-slate-300 hover:bg-slate-100',}; function Button({ variant = 'primary', children, ...rest }) { return ( <button className={'px-4 py-2 rounded-lg font-semibold disabled:opacity-40 ' + styles[variant]} {...rest}> {children} </button> );} export default function App() { const [on, setOn] = useState(false); return ( <div className="flex flex-wrap gap-2 p-2 items-center"> <Button onClick={() => setOn(!on)}>{on ? 'إيقاف' : 'تشغيل'}</Button> <Button variant="danger">حذف</Button> <Button variant="ghost" disabled>معطّل</Button> <span className={'w-4 h-4 rounded-full ' + (on ? 'bg-emerald-500' : 'bg-slate-300')}></span> </div> );}
...rest يمرر بقية الخصائص (onClick و disabled) إلى الزر الحقيقي. مكوّن واحد، وكل الأزرار في التطبيق متسقة الشكل.
٤التثبيت في مشروع Vite
- ثبّت الحزمتين:
npm install tailwindcss @tailwindcss/vite - أضف الإضافة في
vite.config.js. - في أول ملف CSS الرئيسي:
@import "tailwindcss"; - شغّل
npm run devواستخدم الأصناف في JSX.
import { defineConfig } from 'vite';import react from '@vitejs/plugin-react';import tailwindcss from '@tailwindcss/vite'; export default defineConfig({ plugins: [react(), tailwindcss()],});
هذه خطوات الإصدار 4 من Tailwind. والإصدارات تتغير؛ فإن اختلفت الخطوات عند تثبيتك فارجع إلى صفحة التثبيت الرسمية لـ Tailwind مع Vite. وفي المختبر نحمّل Tailwind داخل المعاينة مباشرة، فتعمل الأصناف فورًا.
٥جرّب بنفسك
🧪 مختبر Reactغيّر الأصناف وشاهد النتيجة فورًا.
توقّع وتحقّق
ماذا يعني الصنف p-4 ؟
4 × 0.25rem.أي صنف يعمل صحيحًا في العربية والإنجليزية؟
s = start.hover:bg-sky-700 يطبّق اللون:
حالة
hover.لماذا CSS الناتج من Tailwind صغير؟
يفحص الكود.
الخلاصة
Tailwind: أصناف صغيرة تركّبها فيclassName، ولا يولّد إلا ما استخدمته.- المقياس:
1 = 4بكسل؛pحشو،mهامش،gapفجوة. - للعربية:
msوmeوpsوpeبدلmlوmr. - الحالات:
hover: وfocus: وdisabled:. - المكوّن يبني الصنف من الخصائص؛ اكتب أسماء الأصناف كاملة.
تحدٍّ برمجي: بطاقة دورة بـ Tailwind
سهلنسّق بطاقة دورة تدريبية بأصناف Tailwind فقط، بلا CSS ولا style.
المطلوب:
- البطاقة
<div id="card">بحشوp-6وزواياrounded-xlوخلفيةbg-whiteوظلshadow-md. - العنوان
<h2>أطر الويب</h2>بحجمtext-2xlووزنfont-bold. - شارة
<span id="tag">3 ساعات</span>بخلفيةbg-emerald-100ونصtext-emerald-800وزواياrounded-full. - لا تستخدم السمة style.
👀 اعرض الناتج المطلوب (وجرّبه)
✓ التحقق الآلي من حلّك:
- الكود يعمل بلا أخطاء في Console
- البطاقة بحشو 24px
- البطاقة بزوايا مستديرة وظل
- العنوان كبير وعريض
- الشارة خضراء فاتحة ومستديرة
- لا تستخدم style
💡 تلميح 1
الأصناف كلها مذكورة في المطلوب؛ ضعها في className.
💡 تلميح 2
rounded-full للشارة يجعل زواياها دائرية كاملة.حاول بنفسك أولًا؛ للمسألة أكثر من حلّ صحيح.
export default function App() { return ( <div id="card" className="p-6 rounded-xl bg-white shadow-md"> <h2 className="text-2xl font-bold">أطر الويب</h2> <span id="tag" className="px-3 py-1 rounded-full bg-emerald-100 text-emerald-800">3 ساعات</span> </div> );}