تثبيت Tailwind CSS وإعداد المشروع - دليل شامل

Q: كيف يختلف تكوين Tailwind CSS v4 عن v3؟

يستخدم v4 توجيه CSS الأصلي @theme للتكوين داخل أوراق الأنماط، بينما يستخدم v3 ملف tailwind.config.js منفصلاً. يتوافق v4 بشكل أكبر مع معايير CSS وله تكوين أبسط.

Q: لماذا لا يظهر لي الإكمال التلقائي لـ Tailwind في VS Code؟

تأكد من تثبيت إضافة Tailwind CSS IntelliSense وتفعيل editor.quickSuggestions.strings في إعداداتك. إذا كنت تستخدم تثبيت PostCSS، تأكد أيضاً من وجود ملف التكوين الصحيح في جذر مشروعك.

البدء السريع عبر CDN

أسرع طريقة لتجربة Tailwind CSS هي عبر رابط CDN — لا حاجة لأدوات بناء، فقط أضفه مباشرة إلى ملف HTML الخاص بك.

مثال

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>البدء السريع عبر CDN</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 flex items-center justify-center">
  <div class="bg-white p-8 rounded-lg shadow-md">
    <h1 class="text-3xl font-bold text-blue-600 mb-4">مرحباً Tailwind!</h1>
    <p class="text-gray-600">جرب Tailwind CSS بسرعة عبر CDN</p>
  </div>
</body>
</html>

▶ جرّب الكود

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي كتابة فئات CSS مخصصة وربط ورقة الأنماط، بينما تتيح لك طريقة CDN الخاصة بـ Tailwind البدء في استخدام جميع فئات الأدوات عبر وسم <script> فقط.

⚠️ ملاحظة: طريقة CDN مناسبة فقط للتعلم والنماذج الأولية. للإنتاج، استخدم طريقة التثبيت المناسبة.

الإعداد القياسي مع Vite + PostCSS

للمشاريع الإنتاجية، يُوصى بالتثبيت القياسي عبر Vite + PostCSS للحصول على أفضل أداء بناء وتجربة تطوير.

مثال

BASH

npm create vite@latest my-tailwind-app -- --template vanilla
cd my-tailwind-app

npm install tailwindcss @tailwindcss/vite

npm run dev

▶ جرّب الكود

قم بتكوين إضافة Tailwind في vite.config.js:

JAVASCRIPT

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

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

CSS التقليدي مقابل Tailwind تتطلب المشاريع التقليدية تكوين PostCSS وAutoprefixer والإضافات الأخرى يدوياً، بينما يتولى Tailwind v4 جميع التكوينات تلقائياً عبر إضافة Vite.

استخدام @import "tailwindcss"

يستخدم Tailwind CSS v4 صيغة @import بدلاً من توجيهات @tailwind القديمة، مما يتوافق بشكل أفضل مع مواصفات CSS القياسية.

مثال

أنشئ ورقة الأنماط الرئيسية src/style.css:

CSS

@import "tailwindcss";

▶ جرّب الكود

قم باستيرادها في ملف HTML الخاص بك:

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>مثال استخدام الاستيراد</title>
  <link rel="stylesheet" href="/src/style.css">
</head>
<body class="bg-gradient-to-r from-purple-500 to-pink-500 min-h-screen">
  <div class="container mx-auto p-8">
    <h1 class="text-4xl font-bold text-white text-center">
      Tailwind CSS v4
    </h1>
  </div>
</body>
</html>

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي كتابة العديد من قواعد الأنماط في ملف CSS، بينما يجلب Tailwind v4 إطار الأدوات بالكامل بسطر واحد فقط: @import "tailwindcss".

نظرة عامة على تكوين tailwind.config

يدعم Tailwind CSS v4 التكوين المباشر عبر ملفات CSS، مما يلغي الحاجة إلى ملف تكوين JavaScript منفصل.

مثال

استخدم توجيه @theme في ملف CSS لتخصيص السمة:

CSS

@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --color-secondary: #10b981;
  --font-family-heading: "Noto Sans SC", sans-serif;
}

▶ جرّب الكود

استخدام السمة المخصصة:

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>تكوين سمة مخصصة</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3b82f6',
            secondary: '#10b981',
          }
        }
      }
    }
  </script>
</head>
<body class="min-h-screen p-8">
  <button class="bg-primary text-white px-6 py-3 rounded-lg hover:bg-blue-700">
    أساسي
  </button>
  <button class="bg-secondary text-white px-6 py-3 rounded-lg ml-4 hover:bg-green-700">
    ثانوي
  </button>
</body>
</html>

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي تعريف متغيرات CSS والإشارة إليها في جميع أنحاء الكود، بينما ينشئ تكوين سمة Tailwind فئات الأدوات المقابلة مباشرة، مما يجعلها أكثر ملاءمة للاستخدام.

توصيات إضافات VS Code

يمكن أن تعزز إضافات VS Code بشكل كبير إنتاجيتك في تطوير Tailwind CSS.

الإضافات الأساسية

Tailwind CSS IntelliSense - يوفر الإكمال التلقائي وتمييز المعاينة السابقة عند التحويم
Prettier - التنسيق التلقائي وترتيب أسماء الفئات

مثال

بعد تثبيت الإضافات، تظهر اقتراحات الإكمال التلقائي أثناء كتابة أسماء الفئات:

HTML

<div class="bg-blue-500">

<p class="text-lg font-semibold">

<div class="shadow-lg rounded-xl p-6">

▶ جرّب الكود

💡 نصيحة: أضف الإعدادات التالية إلى تكوين VS Code للحصول على تجربة تطوير أفضل:

JSON

{
  "editor.quickSuggestions": {
    "strings": true
  },
  "css.validate": false
}

مشروعك الأول مع Tailwind

لنقم بإنشاء مشروع Tailwind كامل لترسيخ ما تعلمناه.

مثال

هيكل المشروع والكود بالكامل:

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>مشروعي الأول مع Tailwind</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 min-h-screen">
  <nav class="bg-white shadow-sm">
    <div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
      <h1 class="text-xl font-bold text-gray-800">موقعي</h1>
      <div class="space-x-4">
        <a href="#" class="text-gray-600 hover:text-blue-600 transition">الرئيسية</a>
        <a href="#" class="text-gray-600 hover:text-blue-600 transition">حول</a>
        <a href="#" class="text-gray-600 hover:text-blue-600 transition">اتصل بنا</a>
      </div>
    </div>
  </nav>

  <main class="max-w-7xl mx-auto px-4 py-12">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
        <div class="h-48 bg-gradient-to-br from-blue-400 to-purple-500"></div>
        <div class="p-6">
          <h3 class="text-lg font-semibold text-gray-800 mb-2">عنوان البطاقة</h3>
          <p class="text-gray-600 text-sm">مكون بطاقة مبني باستخدام Tailwind CSS.</p>
        </div>
      </div>
      <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
        <div class="h-48 bg-gradient-to-br from-green-400 to-teal-500"></div>
        <div class="p-6">
          <h3 class="text-lg font-semibold text-gray-800 mb-2">عنوان البطاقة</h3>
          <p class="text-gray-600 text-sm">التخطيط المتجاوب يتكيف مع أحجام الشاشات المختلفة.</p>
        </div>
      </div>
      <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
        <div class="h-48 bg-gradient-to-br from-orange-400 to-red-500"></div>
        <div class="p-6">
          <h3 class="text-lg font-semibold text-gray-800 mb-2">عنوان البطاقة</h3>
          <p class="text-gray-600 text-sm">لا حاجة لأي CSS مخصص على الإطلاق.</p>
        </div>
      </div>
    </div>
  </main>
</body>
</html>

▶ جرّب الكود

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي كتابة ملفات CSS منفصلة لأشرطة التنقل والبطاقات والشبكات والمكونات الأخرى، بينما ينجز Tailwind جميع الأنماط مباشرة في HTML باستخدام فئات الأدوات، مما يحسّن كفاءة التطوير بشكل كبير.

❓ أسئلة شائعة

س ما الفرق بين طريقة CDN والتثبيت المناسب؟

ج تقوم طريقة CDN بتحميل مكتبة Tailwind الكاملة (حوالي 300 كيلوبايت) مع جميع فئات الأدوات، وهي مناسبة للتطوير والنماذج الأولية. أما التثبيت المناسب فيقوم بإنشاء CSS عند الطلب عبر أدوات البناء، وعادة ما ينتج فقط 10-20 كيلوبايت للإنتاج، مما يوفر أداءً أفضل.

س كيف يختلف تكوين Tailwind CSS v4 عن v3؟

ج يستخدم v4 توجيه CSS الأصلي @theme للتكوين داخل أوراق الأنماط، بينما يستخدم v3 ملف tailwind.config.js منفصلاً. يتوافق v4 بشكل أكبر مع معايير CSS وله تكوين أبسط.

س لماذا لا يظهر لي الإكمال التلقائي لـ Tailwind في VS Code؟

ج تأكد من تثبيت إضافة Tailwind CSS IntelliSense وتفعيل editor.quickSuggestions.strings في إعداداتك. إذا كنت تستخدم تثبيت PostCSS، تأكد أيضاً من وجود ملف التكوين الصحيح في جذر مشروعك.

س هل يمكنني استخدام Tailwind وـ CSS المخصص معاً؟

ج نعم. يتوافق Tailwind بالكامل مع CSS الأصلي، ويمكنك مزجهما حسب الحاجة. ومع ذلك، يُفضل استخدام فئات أدوات Tailwind للحفاظ على اتساق أسلوب الكود.

📖 ملخص

يوفر Tailwind CSS كلاً من طريقة CDN والتثبيت المناسب،مناسبين للنماذج الأولية والإنتاج على التوالي
Vite + PostCSS هو الإعداد القياسي الموصى به، ويوفر أفضل أداء بناء
يستخدم Tailwind CSS v4 صيغة @import "tailwindcss" لإستيراد الإطار
خصص ألوان السمة والخطوط عبر توجيه @theme أو تكوين سكريبت CDN
تضمن إضافة Tailwind CSS IntelliSense لـ VS Code بشكل كبير كفاءة التطوير
أوضح المشروع الأول كيفية بناء صفحة متجاوبة بسرعة باستخدام Tailwind

📝 تمارين

⭐ استخدم طريقة CDN لإنشاء صفحة بسيطة تحتوي على عنوان وفقرة وزر، مع تطبيق 3 فئات أدوات Tailwind على الأقل لكل عنصر
⭐⭐ قم بتثبيت Tailwind CSS بشكل صحيح مع Vite، وأنشئ صفحة تحتوي على شريط تنقل ومنطقة محتوى، وقم بتكوين ألوان سمة مخصصة
⭐⭐⭐ أنشئ صفحة قائمة بطاقات متجاوبة بالكامل مع تكوين سمة مخصصة، وتأثيرات التحويم، وأعمدة مختلفة أحجام الشاشات المختلفة