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

Q: كيف يختلف تكوين Tailwind CSS الإصدار 4 عن الإصدار 3؟

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

1. البدء السريع في استخدام شبكة توزيع المحتوى (CDN)

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

▶ مثال

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CDN Quick Start</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">Hello Tailwind!</h1>
    <p class="text-gray-600">Quickly try Tailwind CSS via CDN</p>
  </div>
</body>
</html>

▶ جرّب الكود

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

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

2. الإعداد القياسي لـ 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.

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

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

▶ مثال

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

CSS

@import "tailwindcss";

▶ جرّب الكود

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

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Import Usage Example</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".

4. نظرة عامة على ملف التكوين 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="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Theme Configuration</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">
    Primary
  </button>
  <button class="bg-secondary text-white px-6 py-3 rounded-lg ml-4 hover:bg-green-700">
    Secondary
  </button>
</body>
</html>

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

5. توصيات بشأن ملحقات VS Code

يمكن أن يؤدي تثبيت ملحقات VS Code إلى تعزيز إنتاجيتك في تطوير Tailwind CSS بشكل كبير.

(1) المكونات الإضافية الأساسية

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
}

6. مشروعك الأول على Tailwind

دعونا ننشئ مشروعًا كاملاً باستخدام Tailwind لتعزيز ما تعلمناه.

▶ مثال

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

HTML 📖 للعرض فقط

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Tailwind Project</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">My Website</h1>
      <div class="space-x-4">
        <a href="#" class="text-gray-600 hover:text-blue-600 transition">Home</a>
        <a href="#" class="text-gray-600 hover:text-blue-600 transition">About</a>
        <a href="#" class="text-gray-600 hover:text-blue-600 transition">Contact</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">Card Title</h3>
          <p class="text-gray-600 text-sm">A card component built with 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">Card Title</h3>
          <p class="text-gray-600 text-sm">Responsive layout adapts to different screen sizes.</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">Card Title</h3>
          <p class="text-gray-600 text-sm">No custom CSS needed at all.</p>
        </div>
      </div>
    </div>
  </main>
</body>
</html>

46 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

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

❓ أسئلة شائعة

س ما الفرق بين نهج CDN والتثبيت الصحيح؟

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

س كيف يختلف تكوين Tailwind CSS الإصدار 4 عن الإصدار 3؟

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

س لماذا لا يعرض VS Code خاصتي ميزة الإكمال التلقائي لـ Tailwind؟

ج تأكد من تثبيت المكون الإضافي 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، وإنشاء صفحة تحتوي على شريط التنقل ومنطقة المحتوى، وتهيئة ألوان السمة المخصصة
⭐⭐⭐ إنشاء صفحة قائمة بطاقات متوافقة تمامًا مع جميع الأحجام، مع إعدادات مخصصة للقالب، وتأثيرات عند تمرير المؤشر، وعدد أعمدة مختلف حسب أحجام الشاشة المختلفة

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن