دليل Tailwind CSS v4 الكامل بالدارجة: من التثبيت حتى تصميم موقع عربي RTL

مقدمة

إلى كنتي كتخدم فالـ Frontend، أكيد سمعتي بـ Tailwind CSS. ولّى من أكثر الأدوات استعمالا فتصميم المواقع، وكتلقاه فمشاريع React وVue وLaravel وحتى فمواقع HTML عادية. ومع Tailwind CSS v4، الفريق ديالو عاود كتب المحرك من الأساس وبدّل طريقة الإعداد كاملة: ولّات CSS-first وأسرع بزاف.

فهاد الدليل بالدارجة غادي نشوفو:

• شنو هو Tailwind وشنو الفرق بينو وبين CSS العادي وBootstrap.
• شنو الجديد فـ v4.
• كيفاش تثبتو مع Vite خطوة بخطوة.
• المفاهيم الأساسية: Responsive، Hover/Focus، Dark Mode.
• دعم RTL للمواقع العربية (وهادي مهمة بزاف لينا).
• تخصيص الـ Theme بـ @theme.
• مثال عملي: Hero Section عربي Responsive.
• كيفاش تـ Upgrade من v3، وأحسن الممارسات.

إلى بغيتي تراجع أساسيات CSS الحديث قبل ما تبدا، شوف مقال 10 ميزات رائعة فـ CSS الحديث.

شنو هو Tailwind CSS؟

Tailwind هو Framework ديال CSS كيعتمد على فلسفة Utility-first. بدل ما تكتب Classes بحال .card وتعطيها Styles فملف CSS، كتستعمل Classes صغيرة جاهزة، كل وحدة كدير حاجة وحدة، وكتركبهم مباشرة فالـ HTML:

<button class="rounded-lg bg-blue-600 px-4 py-2 font-semibold text-white hover:bg-blue-700">
  تسجيل
</button>

هنا px-4 كتعطي Padding أفقي، bg-blue-600 لون الخلفية، rounded-lg الحواف المدورة، وhover:bg-blue-700 كتبدل اللون ملي تدوز الماوس.

مقارنة مع CSS العادي وBootstrap

المميزات والعيوب

المميزات:

• ما كتبقاش تقلب على أسماء للـ Classes ولا تتنقل بين ملفات HTML وCSS.
• Design System موحد: الألوان والمسافات والخطوط كيجيو من Scale واحد.
• الـ CSS النهائي فيه غير داكشي اللي استعملتي.

العيوب:

• الـ HTML كيولي عامر بالـ Classes (ما يسميه البعض “Class soup”).
• خاصك وقت باش تحفظ الأسماء.
• إلى ما نظمتيش الكود فـ Components، التكرار كيكثر.

شنو الجديد فـ Tailwind CSS v4؟

1. محرك Oxide: سرعة كبيرة

الفريق عاود كتب المحرك (وجزء منو بـ Rust). حسب الأرقام الرسمية ديال الإعلان، الـ Full builds ولات أسرع حتى 5 مرات، والـ Incremental builds أسرع بأكثر من 100 مرة. فالواقع، التحديثات فالـ Dev كتبان تقريبا فورية.

2. الإعداد ولا فـ CSS (CSS-first configuration)

ما بقاش ضروري tailwind.config.js. دابا كتعرّف الـ Theme ديالك مباشرة فـ CSS بـ @theme:

@import "tailwindcss";

@theme {
  --color-brand-500: oklch(0.62 0.17 155);
  --font-display: "Cairo", sans-serif;
  --breakpoint-3xl: 120rem;
}

وكل متغير كيولد Utilities أوتوماتيكيا: bg-brand-500، text-brand-500، font-display، 3xl:.... وزيد على هادشي، هاد القيم كتولي CSS Variables حقيقية تقدر تستعملها فأي بلاصة بـ var(--color-brand-500).

3. سطر واحد باش تبدا

فـ v3 كنا كنكتبو ثلاثة ديال @tailwind directives. دابا سطر واحد كافي:

@import "tailwindcss";

4. Automatic content detection

ما بقاش خاصك تحدد content باش Tailwind يعرف فين يقلب على الـ Classes. كيكتشف الملفات أوتوماتيكيا، وكيتجاهل الملفات اللي فـ .gitignore. إلى بغيتي تزيد شي مصدر ما تلقاهش (مثلا مكتبة UI فـ node_modules)، كتستعمل @source:

@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib";

5. Native cascade layers

v4 كيستعمل @layer ديال CSS الحقيقية (theme، base، components، utilities)، وهادشي كيخلي ترتيب الأولويات واضح وكيقلل مشاكل الـ Specificity.

6. ألوان OKLCH

الـ Palette الافتراضية تحولت لـ OKLCH، وهي ألوان أكثر حيوية ومتناسقة بصريا، وكتستافد من الشاشات اللي كتدعم Wide gamut (P3).

7. Container queries مدمجة

ما بقيتيش محتاج Plugin. كتحط @container على العنصر الأب، وكتستعمل @sm: و@md:… على الأبناء:

<div class="@container">
  <div class="grid grid-cols-1 @sm:grid-cols-2 @lg:grid-cols-3">
    <!-- ... -->
  </div>
</div>

الفرق مع sm: العادية: sm: كتعتمد على عرض الشاشة، أما @sm: كتعتمد على عرض الـ Container. ممتاز للـ Components اللي كتستعملها فبلايص مختلفة.

8. @custom-variant و@utility

تقدر تزيد Variants وUtilities ديالك مباشرة فـ CSS:

@utility content-auto {
  content-visibility: auto;
}

@custom-variant theme-midnight (&:where([data-theme="midnight"] *));

دابا تقدر تكتب class="content-auto" وtheme-midnight:bg-black، وغادي تخدم مع hover: وmd: بحال أي Utility أخرى.

9. أدوات التثبيت الجديدة

ملاحظة مهمة: v4 كيعتمد على ميزات CSS حديثة، وكيستهدف المتصفحات الحديثة (Safari 16.4+، Chrome 111+، Firefox 128+). إلى كان خاصك تدعم متصفحات قديمة، بقى على v3.4 حاليا.

التثبيت مع Vite خطوة بخطوة

1. إنشاء المشروع

npm create vite@latest my-tailwind-site -- --template vanilla
cd my-tailwind-site
npm install

2. تثبيت Tailwind والـ Plugin ديال Vite

npm install tailwindcss @tailwindcss/vite

3. إعداد Vite

صايب ملف vite.config.js فالجذر ديال المشروع (إلى ما كانش) وزيد الـ Plugin:

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [tailwindcss()],
})

4. استيراد Tailwind فـ CSS

مسح المحتوى ديال src/style.css وحط فيه:

@import "tailwindcss";

القالب vanilla ديال Vite كيستورد style.css من src/main.js. تقدر تخلي هاد الطريقة، ولا تربطو مباشرة فـ index.html بـ <link href="/src/style.css" rel="stylesheet">.

5. التشغيل

npm run dev

جرب تزيد class="text-3xl font-bold text-blue-600" على شي عنصر، وإلى تبدل الشكل، راه كلشي خدام.

بدائل: PostCSS والـ CLI

إلى كان المشروع ديالك كيخدم بـ PostCSS (مثلا بعض إعدادات Next.js)، ثبت @tailwindcss/postcss وزيدو فـ postcss.config.mjs:

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
}

وإلى بغيتي غير CLI بلا Bundler:

npm install tailwindcss @tailwindcss/cli
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch

المفاهيم الأساسية

Utilities

كل Class كتدير حاجة وحدة: p-4 (Padding)، mt-6 (Margin-top)، text-lg، font-bold، flex، grid، gap-4، rounded-xl، shadow-md… وتقدر تستعمل قيم خاصة بين []، مثلا w-[327px] ولا bg-[#1e3a8a].

Responsive: sm / md / lg / xl

Tailwind كيخدم بمنطق Mobile-first: الـ Class بلا Prefix كتطبق على كاع الشاشات، وmd: كتطبق من الحجم المتوسط فما فوق.

<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
  <!-- عمود واحد فالهاتف، 2 فالتابلت، 4 فالديسكتوب -->
</div>

Hover وFocus والحالات الأخرى

<input
  class="rounded-md border border-gray-300 px-3 py-2 focus:border-blue-500 focus:outline-hidden focus:ring-2 focus:ring-blue-200"
  placeholder="البريد الإلكتروني"
/>

كاين بزاف ديال الـ Variants بحال active:، disabled:، first:، group-hover:… وتقدر تركبهم: md:hover:bg-blue-700.

Dark Mode

افتراضيا، dark: كتعتمد على الإعداد ديال النظام (prefers-color-scheme):

<div class="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
  مرحبا!
</div>

إلى بغيتي تتحكم فيه بزر (Toggle) عبر Class dark على <html>، زيد هاد السطر فالـ CSS:

@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

ومن بعد بـ JavaScript:

document.documentElement.classList.toggle('dark')

دعم RTL للمواقع العربية

هادي النقطة اللي كتهمنا بزاف كمطورين عرب. كثير ديال المطورين كيستعملو ml-4 وpl-6 وleft-0، ومن بعد ملي كيقلبو الموقع لـ RTL كيلقاو كلشي مقلوب.

استعمل Logical properties

الحل هو تستعمل Utilities اللي كتعتمد على البداية والنهاية (Start/End) بدل اليسار واليمين:

فـ dir="rtl"، ms-4 كتعطي Margin على اليمين، وفـ dir="ltr" كتعطيه على اليسار. نفس الكود كيخدم فاللغتين.

Variants ديال rtl: وltr:

ملي كتحتاج تبدل حاجة ما عندهاش Logical equivalent، بحال قلب أيقونة السهم:

<html lang="ar" dir="rtl">
  <body>
    <a href="/blog" class="inline-flex items-center gap-2 text-blue-600">
      اقرأ المزيد
      <svg class="size-4 ltr:rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M15 18l-6-6 6-6" />
      </svg>
    </a>
  </body>
</html>

السهم مرسوم متجه لليسار (الاتجاه الطبيعي “للقدام” فالعربية)، وltr:rotate-180 كتقلبو إلى كانت الصفحة بالإنجليزية.

نصيحة: فالـ Flex والـ Grid، استعمل gap-* بدل Margins بين العناصر. gap ما كيتأثرش بالاتجاه، وكيخدم مزيان فـ RTL وLTR.

تخصيص الـ Theme بـ @theme

نقدرو نعرفو الهوية البصرية ديال الموقع كاملة فبلاصة وحدة:

@import "tailwindcss";

@theme {
  --font-display: "Cairo", sans-serif;

  --color-brand-50: oklch(0.97 0.02 165);
  --color-brand-500: oklch(0.62 0.15 165);
  --color-brand-700: oklch(0.48 0.12 165);

  --radius-card: 1.25rem;
}

دابا عندك: font-display، bg-brand-500، text-brand-700، bg-brand-50، وrounded-card. وإلى بغيتي تمسح الألوان الافتراضية كاملين وتخدم غير بالألوان ديالك، كتقدر تكتب --color-*: initial; فبداية @theme.

مثال عملي: Hero Section عربي Responsive وRTL

غادي نبنيو Hero Section لموقع عربي فيه عنوان، وصف، جوج أزرار، وكارطة إحصائيات، كيخدم فالهاتف والديسكتوب ومع Dark Mode.

أولا، ملف src/style.css:

@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --font-display: "Cairo", sans-serif;
  --color-brand-50: oklch(0.97 0.02 165);
  --color-brand-500: oklch(0.62 0.15 165);
  --color-brand-600: oklch(0.55 0.14 165);
  --color-brand-700: oklch(0.48 0.12 165);
}

ومن بعد index.html:

<!doctype html>
<html lang="ar" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>أكاديمية الكود</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;800&display=swap" rel="stylesheet" />
    <link href="/src/style.css" rel="stylesheet" />
  </head>
  <body class="bg-white font-display text-gray-900 antialiased dark:bg-gray-950 dark:text-gray-100">
    <section class="mx-auto max-w-6xl px-4 py-16 md:py-24">
      <div class="grid items-center gap-12 md:grid-cols-2">
        <!-- النص -->
        <div class="text-center md:text-start">
          <span class="inline-block rounded-full bg-brand-50 px-3 py-1 text-sm font-semibold text-brand-700 dark:bg-brand-700/20 dark:text-brand-50">
            جديد: دورة Tailwind v4
          </span>

          <h1 class="mt-6 text-4xl leading-tight font-extrabold md:text-5xl">
            تعلّم البرمجة <span class="text-brand-600">بالدارجة</span> وبطريقة عملية
          </h1>

          <p class="mt-4 text-lg leading-relaxed text-gray-600 dark:text-gray-400">
            دروس مبسطة، مشاريع حقيقية، ومجتمع كيعاونك من الصفر حتى أول خدمة.
          </p>

          <div class="mt-8 flex flex-col justify-center gap-3 sm:flex-row md:justify-start">
            <a href="#start" class="inline-flex items-center justify-center gap-2 rounded-xl bg-brand-600 px-6 py-3 font-semibold text-white shadow-md transition hover:bg-brand-700 focus-visible:ring-4 focus-visible:ring-brand-500/40 focus-visible:outline-hidden">
              ابدا دابا
              <svg class="size-5 ltr:rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                <path d="M15 18l-6-6 6-6" />
              </svg>
            </a>
            <a href="#courses" class="inline-flex items-center justify-center rounded-xl border border-gray-300 px-6 py-3 font-semibold transition hover:bg-gray-100 dark:border-gray-700 dark:hover:bg-gray-800">
              شوف الدورات
            </a>
          </div>
        </div>

        <!-- كارطة الإحصائيات -->
        <div class="@container">
          <div class="rounded-3xl border-s-4 border-brand-500 bg-gray-50 p-6 shadow-lg dark:bg-gray-900">
            <h2 class="text-xl font-bold">علاش تختارنا؟</h2>
            <ul class="mt-6 grid grid-cols-1 gap-4 @sm:grid-cols-3">
              <li class="rounded-2xl bg-white p-4 text-center dark:bg-gray-800">
                <p class="text-3xl font-extrabold text-brand-600">+120</p>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">درس</p>
              </li>
              <li class="rounded-2xl bg-white p-4 text-center dark:bg-gray-800">
                <p class="text-3xl font-extrabold text-brand-600">+30</p>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">مشروع عملي</p>
              </li>
              <li class="rounded-2xl bg-white p-4 text-center dark:bg-gray-800">
                <p class="text-3xl font-extrabold text-brand-600">24/7</p>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">دعم المجتمع</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

شنو اللي درنا هنا؟

• dir="rtl" على <html> باش الصفحة كاملة تولي من اليمين لليسار.
• md:text-start بدل md:text-right، باش إلى بدلنا اللغة لـ LTR يبقى التصميم صحيح.
• border-s-4 كتعطي حد ملون فبداية الكارطة (اليمين فـ RTL).
• @container و@sm:grid-cols-3: الإحصائيات كتولي 3 أعمدة غير إلى كانت الكارطة عريضة كفاية، بغض النظر على حجم الشاشة.
• ltr:rotate-180 على السهم.
• font-display جاية من @theme، وdark: خدامة بالـ Class dark على <html>.

الانتقال من v3 لـ v4

Tailwind عطانا أداة رسمية كتدير أغلب الخدمة أوتوماتيكيا:

npx @tailwindcss/upgrade

الأداة كتحتاج Node.js 20 فما فوق، ونصيحة: خدمها فـ Branch جديدة باش تقارن التغييرات بسهولة. إلى ما متمكنش من Git، شوف مقال Git.

الأداة كتحول الإعدادات من tailwind.config.js لـ @theme، وكتبدل الـ Directives، وكتحدث أسماء الـ Classes. ومن أهم التغييرات اللي خاصك تعرفها:

وكاين تغييرات أخرى فالسلوك الافتراضي، مثلا اللون الافتراضي ديال border وring ولا currentColor. داكشي علاش راجع الواجهات ديالك بالعين من بعد الـ Upgrade، ورجع للـ Upgrade guide الرسمي للتفاصيل الكاملة.

وإلى كان عندك tailwind.config.js كبير وما بغيتيش تحولو دابا، تقدر تستعمل @config "../tailwind.config.js"; فالـ CSS كحل مؤقت.

أحسن الممارسات

1. تجنب “Class soup” بالـ Components

الحل الحقيقي للتكرار ماشي @apply، بل الـ Components. إلى كنتي كتخدم بـ React ولا Vue، صايب Component <Button> وحط فيه الـ Classes مرة وحدة. (إلى بغيتي تبدا مع React، شوف كل شيء عن React).

2. استعمل @apply بقلة

@apply مفيد لحالات محددة، بحال تنسيق محتوى جاي من CMS ولا Markdown:

@import "tailwindcss";

@layer components {
  .prose-link {
    @apply font-semibold text-blue-600 underline underline-offset-4 hover:text-blue-800;
  }
}

ولكن إلى ولّيتي كتكتب @apply فكل بلاصة، راك رجعتي لـ CSS العادي بطريقة معقدة. وملاحظة: فـ <style> ديال Vue ولا Svelte، خاصك تزيد @reference "../app.css"; باش @apply يعرف الـ Theme ديالك.

3. رتب الـ Classes أوتوماتيكيا بـ Prettier

الـ Plugin الرسمي prettier-plugin-tailwindcss كيرتب الـ Classes بترتيب ثابت:

npm install -D prettier prettier-plugin-tailwindcss

ومن بعد فـ .prettierrc:

{
  "plugins": ["prettier-plugin-tailwindcss"],
  "tailwindStylesheet": "./src/style.css"
}

الخيار tailwindStylesheet كيعلم الـ Plugin فين كاين الملف اللي فيه @import "tailwindcss" والـ Theme ديالك.

4. نصائح أخرى

• ثبت Extension Tailwind CSS IntelliSense فـ VS Code باش يعطيك Autocomplete ومعاينة.
• عرّف الألوان والخطوط فـ @theme وما تكثرش من القيم العشوائية بحال [#123456].
• فكر من الأول فـ Logical properties إلى كان الموقع عربي ولا متعدد اللغات.
• ما تبنيش أسماء الـ Classes ديناميكيا بحال `bg-${color}-500`، حيت Tailwind كيقرا الملفات كنص وما غاديش يلقاها. كتب الأسماء كاملة.

أسئلة شائعة

واش Tailwind CSS v4 مجاني؟

نعم، Tailwind CSS مفتوح المصدر ومجاني. كاين منتجات مدفوعة من نفس الفريق (بحال مكتبات Components وTemplates)، ولكن الـ Framework راسو مجاني.

واش ضروري نحيد tailwind.config.js ملي ندوز لـ v4؟

ماشي ضروري فورا. تقدر تحتافظ بيه وتربطو بـ @config، ولكن الطريقة المنصوح بيها فـ v4 هي @theme فالـ CSS، وأداة الـ Upgrade كتحولو ليك.

واش Tailwind كيدعم العربية وRTL؟

نعم، وبشكل مزيان. استعمل Logical utilities بحال ms-* وps-* وtext-start، وزيد rtl: وltr: للحالات الخاصة، وحط dir="rtl" على <html>.

واش Tailwind أحسن من Bootstrap؟

على حسب المشروع. Bootstrap مزيان إلى بغيتي Components جاهزة بسرعة وبلا تصميم خاص. Tailwind أحسن إلى بغيتي تصميم فريد، تحكم كامل، وCSS نهائي خفيف.

واش نقدر نستعمل Tailwind v4 مع React ولا Laravel؟

نعم. مع أي مشروع كيخدم بـ Vite (React، Vue، Laravel مع Vite…) استعمل @tailwindcss/vite، ومع المشاريع اللي كتعتمد على PostCSS استعمل @tailwindcss/postcss.

خلاصة

Tailwind CSS v4 خطوة كبيرة للقدام: محرك Oxide سريع، إعداد مباشر فـ CSS بـ @theme، سطر @import واحد، Container queries مدمجة، وألوان OKLCH. وبالنسبة لينا كمطورين عرب، دعم الـ Logical properties وrtl: كيسهل بزاف بناء مواقع عربية نظيفة.

نصيحتي: صايب مشروع Vite صغير، ونقل المثال ديال الـ Hero Section، وجرب تبدل dir من rtl لـ ltr وشوف كيفاش التصميم كيتأقلم بوحدو. ومن بعد، ابدا تخدم بيه فمشروع حقيقي.

ودابا سؤال ليك: واش كتستعمل Tailwind فالمشاريع ديالك؟ ولا باقي مفضل CSS العادي ولا Bootstrap؟ وإلى جربتي v4، شنو الميزة اللي عجباتك أكثر؟ كتب لينا على [email protected]، وشارك المقال مع صحابك فـ Frontend!