Tailwind CSS مع React: تنسيق الواجهة بسرعة ووضوح

إذا كنت تريد بناء واجهات بسرعة بدون كتابة ملفات CSS طويلة، فـ Tailwind CSS هو واحد من أفضل الخيارات. الفكرة: تستخدم utility classes جاهزة داخل الـ JSX مباشرة.

في هذا الدرس سنتعلم: كيف نثبت Tailwind، كيف نستخدمه داخل React، وكيف نحافظ على الكود مرتب وواضح.

لماذا Tailwind مع React؟

• تطوير سريع بدون كتابة CSS كثيرة.
• نظام ألوان ومسافات موحّد.
• سهولة بناء واجهات متناسقة وقابلة للتعديل.

الفكرة الأساسية: Utility Classes

بدل كتابة ملف CSS، تكتب التنسيق مباشرة ككلاسات صغيرة داخل العنصر:

function Card() {
  return (
    <div className="p-6 bg-white rounded-xl shadow-md">
      <h2 className="text-xl font-bold">عنوان البطاقة</h2>
      <p className="text-gray-600 mt-2">وصف بسيط للمحتوى.</p>
    </div>
  );
}

الخطوة 1: تثبيت Tailwind

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

هذا الأمر ينشئ ملفي tailwind.config.js و postcss.config.js.

الخطوة 2: تفعيل المسارات (content)

// tailwind.config.js
export default {
  content: ["./index.html", "./src/**/*.{js,jsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

هذا يخبر Tailwind أين يبحث عن الكلاسات داخل ملفات React.

الخطوة 3: إضافة تعليمات Tailwind في CSS

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

مثال عملي سريع

function Profile() {
  return (
    <div className="max-w-md mx-auto mt-10 p-6 bg-white rounded-2xl shadow-lg">
      <h1 className="text-2xl font-semibold">أحمد محمد</h1>
      <p className="text-gray-500 mt-1">Frontend Developer</p>
      <button className="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg">
        متابعة
      </button>
    </div>
  );
}

تنظيم الكلاسات بشكل نظيف

• قسّم المكوّنات بدل كتابة كلاس طويل جدًا.
• أعد استخدام مكوّنات جاهزة بدل تكرار نفس الكلاسات.
• استخدم أدوات مثل clsx إذا احتجت دمج كلاسات شرطية.

import clsx from "clsx";

function Badge({ variant }) {
  return (
    <span
      className={clsx(
        "px-3 py-1 rounded-full text-sm",
        variant === "success" && "bg-green-100 text-green-700",
        variant === "danger" && "bg-red-100 text-red-700"
      )}
    >
      {variant}
    </span>
  );
}

أفضل الممارسات

• استخدم ألوانًا محددة من نفس لوحة Tailwind لتناسق الواجهة.
• لا تخلط Tailwind مع CSS عشوائي بدون سبب واضح.
• ابدأ بقيم بسيطة ثم خصّص الـ theme عند الحاجة.

الأسئلة الشائعة — FAQ

ما هو Tailwind CSS؟

إطار يعتمد على utility classes لتنسيق الواجهات بسرعة.

هل Tailwind مناسب لمشاريع كبيرة؟

نعم، لأنه يوفر نظامًا موحّدًا يسهل تنظيمه.

كيف أحافظ على نظافة الكلاسات؟

عبر تقسيم المكوّنات وإعادة الاستخدام أو أدوات مثل clsx.

هل أحتاج كتابة CSS مع Tailwind؟

غالبًا لا، لكن يمكنك إضافة CSS مخصص عند الضرورة.

هل يعمل Tailwind مع React مباشرة؟

نعم، بعد التثبيت والإعداد يمكنك استخدام الكلاسات داخل JSX.