إطار Tailwind CSS

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

15 دقيقة الدرس 2 من 35

نظرة عامة على طرق التثبيت

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

اختيار الطريقة المناسبة

CDN: نماذج أولية سريعة، التعلم، لا حاجة لخطوة بناء
CLI: مشاريع بسيطة، مواقع ثابتة، تكوين بسيط
PostCSS: الأكثر مرونة، يعمل مع أي أداة بناء، جاهز للإنتاج
تكامل الإطار: Next.js، Vite، Laravel - إعدادات مكونة مسبقًا

الطريقة 1: CDN (Play CDN)

أسرع طريقة لتجربة Tailwind هي عبر Play CDN. هذا مثالي للتعلم والنماذج الأولية أو التجارب السريعة، ولكن لا ينبغي استخدامه في الإنتاج.

إعداد CDN

تثبيت CDN - ملف HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CDN Example</title>

    <!-- Tailwind Play CDN -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- اختياري: تكوين مخصص -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'brand': '#1da1f2',
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-100">
    <div class="container mx-auto p-8">
        <h1 class="text-4xl font-bold text-brand">Hello Tailwind!</h1>
        <p class="text-gray-700 mt-4">This is using the CDN version.</p>
    </div>
</body>
</html>

مزايا وعيوب CDN

قيود CDN

المزايا: لا إعداد، استخدام فوري، رائع للتعلم
العيوب: حجم ملف كبير (~3MB)، لا تطهير، لا إضافات مخصصة، يتطلب JavaScript، غير جاهز للإنتاج

Play CDN يحمل مكتبة Tailwind CSS بالكامل ديناميكيًا. إنه مريح ولكنه منتفخ. استخدمه للتعلم والنماذج الأولية فقط.

الطريقة 2: Tailwind CLI

Tailwind CLI هو أداة مستقلة تعالج CSS الخاص بك دون الحاجة إلى npm أو تكوين Node.js. إنه مثالي للمواقع الثابتة والمشاريع البسيطة.

تثبيت Tailwind CLI

خطوات تثبيت CLI

# 1. تثبيت Tailwind CLI عالميًا (اختياري)
npm install -g tailwindcss

# أو قم بتنزيل الثنائي المستقل من:
# https://github.com/tailwindlabs/tailwindcss/releases

# 2. إنشاء دليل المشروع
mkdir my-project
cd my-project

# 3. تهيئة تكوين Tailwind
npx tailwindcss init

# 4. إنشاء ملف CSS المدخل
# إنشاء: src/input.css

بنية المشروع

بنية مشروع CLI

my-project/
├── src/
│   └── input.css          # CSS المصدر مع توجيهات Tailwind
├── dist/
│   └── output.css         # CSS المولد (يتم إنشاؤه تلقائيًا)
├── index.html             # ملف HTML الخاص بك
└── tailwind.config.js     # تكوين Tailwind

ملف CSS المصدر

src/input.css

/* توجيهات Tailwind */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* CSS المخصص الخاص بك يمكن أن يذهب هنا */
.btn-custom {
    @apply px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600;
}

توجيهات @tailwind تخبر Tailwind أين يحقن الأنماط الأساسية وفئات المكونات وفئات الأدوات.

فهم توجيهات @tailwind

@tailwind base; - إعادة تعيين وأنماط العناصر الأساسية
@tailwind components; - فئات المكونات (إضافات طرف ثالث)
@tailwind utilities; - جميع فئات الأدوات

ملف التكوين

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './src/**/*.{html,js}',
        './*.html',
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

مصفوفة content تخبر Tailwind أي الملفات يجب فحصها بحثًا عن أسماء الفئات. هذا أمر بالغ الأهمية لعملية التطهير.

أوامر البناء

أوامر بناء CLI

# بناء التطوير (مراقبة التغييرات)
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

# بناء الإنتاج (مصغر، منقى)
npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify

# بناء لمرة واحدة
npx tailwindcss -i ./src/input.css -o ./dist/output.css

إعداد ملف HTML

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CLI Project</title>

    <!-- رابط إلى CSS المولد -->
    <link href="./dist/output.css" rel="stylesheet">
</head>
<body>
    <div class="container mx-auto p-8">
        <h1 class="text-4xl font-bold text-blue-600">Hello Tailwind CLI!</h1>
    </div>
</body>
</html>

الطريقة 3: إضافة PostCSS (موصى بها للإنتاج)

النهج الأكثر مرونة والجاهز للإنتاج هو استخدام Tailwind كإضافة PostCSS. يتكامل بسلاسة مع أي أداة بناء (Webpack، Vite، Parcel، إلخ).

التثبيت باستخدام npm

تثبيت npm

# 1. تهيئة مشروع npm (إذا لم يتم بالفعل)
npm init -y

# 2. تثبيت Tailwind CSS والتبعيات
npm install -D tailwindcss postcss autoprefixer

# 3. توليد ملفات التكوين
npx tailwindcss init -p

# هذا ينشئ:
# - tailwind.config.js
# - postcss.config.js

تكوين PostCSS

postcss.config.js

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}

PostCSS هي أداة تحول CSS باستخدام إضافات JavaScript. Tailwind هي إضافة PostCSS، وAutoprefixer تضيف بادئات vendor لتوافق أفضل مع المتصفحات.

تكوين Tailwind

tailwind.config.js (مفصل)

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './src/**/*.{html,js,jsx,ts,tsx,vue}',
        './public/index.html',
        './components/**/*.{js,jsx,ts,tsx}',
    ],
    darkMode: 'class', // or 'media'
    theme: {
        extend: {
            colors: {
                'primary': {
                    50: '#eff6ff',
                    100: '#dbeafe',
                    200: '#bfdbfe',
                    300: '#93c5fd',
                    400: '#60a5fa',
                    500: '#3b82f6',
                    600: '#2563eb',
                    700: '#1d4ed8',
                    800: '#1e40af',
                    900: '#1e3a8a',
                },
            },
            fontFamily: {
                'sans': ['Inter', 'system-ui', 'sans-serif'],
            },
            spacing: {
                '128': '32rem',
                '144': '36rem',
            },
        },
    },
    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
        require('@tailwindcss/aspect-ratio'),
    ],
}

أقسام التكوين موضحة

content: الملفات التي يجب فحصها بحثًا عن أسماء الفئات
darkMode: استراتيجية الوضع الداكن (قائم على class أو media query)
theme: تخصيص رموز التصميم (الألوان، التباعد، الخطوط)
plugins: الإضافات الرسمية وطرف ثالث

إعداد ملف CSS

src/styles.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* طبقة مخصصة للمكونات */
@layer components {
    .btn-primary {
        @apply px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg;
        @apply hover:bg-blue-700 focus:ring-4 focus:ring-blue-300;
        @apply transition duration-200;
    }

    .card {
        @apply bg-white rounded-lg shadow-md p-6;
    }
}

/* طبقة مخصصة للأدوات */
@layer utilities {
    .text-shadow {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    }
}

توجيه @layer يتيح لك تنظيم الأنماط المخصصة في طبقات Tailwind، مما يضمن الترتيب الصحيح والتطهير.

الطريقة 4: تكامل الإطار

Vite + Tailwind

إعداد مشروع Vite

# 1. إنشاء مشروع Vite
npm create vite@latest my-project -- --template vanilla
cd my-project

# 2. تثبيت Tailwind
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# 3. تكوين مسارات المحتوى في tailwind.config.js
# content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}']

# 4. إضافة توجيهات Tailwind إلى src/style.css
# @tailwind base;
# @tailwind components;
# @tailwind utilities;

# 5. تشغيل خادم التطوير
npm run dev

Next.js + Tailwind

إعداد مشروع Next.js

# 1. إنشاء تطبيق Next.js مع Tailwind (دعم مدمج)
npx create-next-app@latest my-app --typescript --tailwind
cd my-app

# Next.js يكون Tailwind تلقائيًا!
# التكوين في tailwind.config.js
# CSS العام في app/globals.css

# 2. تشغيل خادم التطوير
npm run dev

Create React App + Tailwind

إعداد مشروع CRA

# 1. إنشاء تطبيق React
npx create-react-app my-app
cd my-app

# 2. تثبيت Tailwind
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# 3. تكوين مسارات المحتوى
# content: ['./src/**/*.{js,jsx,ts,tsx}']

# 4. إضافة Tailwind إلى src/index.css
# @tailwind base;
# @tailwind components;
# @tailwind utilities;

# 5. بدء خادم التطوير
npm start

تكامل VS Code

امتداد Tailwind CSS IntelliSense الرسمي يحسن بشكل كبير تجربة التطوير مع الإكمال التلقائي، تسليط الضوء على بناء الجملة، والمراجعة.

تثبيت امتداد IntelliSense

افتح VS Code
انتقل إلى الامتدادات (Cmd+Shift+X / Ctrl+Shift+X)
ابحث عن "Tailwind CSS IntelliSense"
قم بتثبيت الامتداد الرسمي بواسطة Tailwind Labs

ميزات IntelliSense

الإكمال التلقائي: يقترح أسماء الفئات أثناء الكتابة
معاينة التحويم: يعرض CSS المولد بواسطة فئة أداة
تسليط الضوء على بناء الجملة: رموز ألوان فئات الأدوات
المراجعة: يحذر حول الفئات غير الصالحة أو التعارضات

إعدادات VS Code

.vscode/settings.json

{
    "tailwindCSS.emmetCompletions": true,
    "tailwindCSS.includeLanguages": {
        "html": "html",
        "javascript": "javascript",
        "typescript": "typescript",
        "javascriptreact": "javascriptreact",
        "typescriptreact": "typescriptreact"
    },
    "editor.quickSuggestions": {
        "strings": true
    },
    "css.validate": false,
    "tailwindCSS.experimental.classRegex": [
        ["cva\(([^)]*)\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
    ]
}

فهم عملية البناء

كيف يولد Tailwind CSS

عند تشغيل بناء Tailwind، يحدث ما يلي:

المسح: Tailwind يفحص الملفات المحددة في مصفوفة content
الاستخراج: يستخرج جميع أسماء الفئات (مثل bg-blue-500، p-4)
التوليد: يولد CSS للفئات المستخرجة باستخدام محرك JIT
التحسين: في الإنتاج، يصغر ويزيل الأنماط غير المستخدمة
الإخراج: يكتب CSS محسّن إلى ملف الإخراج

وضع JIT (Just-In-Time)

Tailwind v3+ يستخدم وضع JIT افتراضيًا. بدلاً من توليد جميع الفئات الممكنة مقدمًا (ملايين التركيبات)، يولد JIT فقط الفئات التي تستخدمها، عند الطلب. هذا يجعل البناء فوريًا ويمكّن القيم التعسفية مثل bg-[#1da1f2].

بناء التطوير مقابل الإنتاج

مقارنة البناء

# بناء التطوير
# - خرائط المصدر الكاملة
# - غير مصغر (قابل للقراءة)
# - إعادة بناء سريعة
# - عادة 3-10KB مع JIT

NODE_ENV=development npx tailwindcss -i input.css -o output.css

# بناء الإنتاج
# - مصغر ومضغوط
# - لا توجد خرائط مصدر
# - جميع الأنماط غير المستخدمة منقاة
# - عادة 5-20KB حجم نهائي

NODE_ENV=production npx tailwindcss -i input.css -o output.css --minify

إضافات Tailwind الرسمية

يوفر Tailwind إضافات رسمية تمتد الوظائف لحالات الاستخدام الشائعة:

إضافة Typography

تثبيت إضافة Typography

# تثبيت
npm install -D @tailwindcss/typography

# إضافة إلى tailwind.config.js
plugins: [
    require('@tailwindcss/typography'),
]

# استخدام في HTML
<article class="prose lg:prose-xl">
    <h1>Article Title</h1>
    <p>Beautiful typography with zero configuration.</p>
</article>

إضافة Forms

تثبيت إضافة Forms

# تثبيت
npm install -D @tailwindcss/forms

# إضافة إلى tailwind.config.js
plugins: [
    require('@tailwindcss/forms'),
]

# مدخلات النموذج الآن لها أنماط افتراضية أفضل
<input type="text" class="rounded-md border-gray-300">

إضافات رسمية أخرى

@tailwindcss/aspect-ratio: الحفاظ على نسب العرض إلى الارتفاع للوسائط
@tailwindcss/line-clamp: اقتطاع النص متعدد الأسطر
@tailwindcss/container-queries: تصميم متجاوب قائم على الحاوية

استكشاف مشاكل الإعداد الشائعة

المشكلة 1: الأنماط لا تظهر

قائمة التحقق من الإصلاح

تحقق من أن توجيهات @tailwind في ملف CSS
تحقق من أن مسارات content في التكوين تتضمن ملفات HTML/JS الخاصة بك
تأكد من أن عملية البناء قيد التشغيل (وضع المراقبة للتطوير)
اربط ملف CSS الإخراج الصحيح في HTML
امسح ذاكرة التخزين المؤقت للمتصفح وأعد التحميل بشكل صارم

المشكلة 2: IntelliSense لا يعمل

خطوات الإصلاح

# 1. تأكد من وجود tailwind.config.js في جذر المشروع
npx tailwindcss init

# 2. إعادة تشغيل VS Code
# 3. تحقق من تثبيت الامتداد وتمكينه
# 4. تحقق من أن إعدادات workspace تسمح بـ IntelliSense في السلاسل

المشكلة 3: عملية البناء بطيئة

تأكد من أنك تستخدم Tailwind v3+ مع وضع JIT (افتراضي)
قلل مسارات content إلى الملفات الضرورية فقط
لا تشمل node_modules في مسارات المحتوى
استخدم أدوات بناء أسرع (Vite بدلاً من Webpack)

تمرين عملي 1: إعداد CDN

أنشئ ملف HTML بسيط باستخدام Tailwind Play CDN. قم ببناء مكون بطاقة مع:

صورة في الأعلى
عنوان ووصف
زر "اقرأ المزيد"

استخدم فقط فئات أدوات Tailwind. جرّب الألوان والتباعد والظلال.

تمرين عملي 2: إعداد CLI

قم بإعداد مشروع جديد باستخدام Tailwind CLI:

إنشاء مجلد مشروع
تهيئة تكوين Tailwind
إنشاء input.css مع توجيهات @tailwind
إنشاء index.html مع تخطيط بسيط
تشغيل البناء مع علامة --watch
تعديل HTML ورؤية التغييرات مباشرة

تمرين عملي 3: تكامل VS Code

قم بتثبيت وتكوين امتداد Tailwind IntelliSense:

تثبيت الامتداد من سوق VS Code
إنشاء مشروع Tailwind (أي طريقة)
اختبار الإكمال التلقائي بكتابة bg- في سمة class
قم بالتحويم فوق فئة أداة لرؤية CSS المولد
جرّب منتقي الألوان على أداة لون

الملخص

في هذا الدرس، استكشفنا طرقًا متعددة لتثبيت وتكوين Tailwind CSS:

CDN: الأسرع للنماذج الأولية، ليس للإنتاج (3MB غير محسّن)
CLI: أداة مستقلة بسيطة، رائعة للمواقع الثابتة
PostCSS: الأكثر مرونة، جاهز للإنتاج، يعمل مع أي أداة بناء
تكامل الإطار: إعدادات مكونة مسبقًا لـ Vite، Next.js، Create React App

المفاهيم الأساسية المغطاة:

توجيهات @tailwind تحقن أنماط Tailwind في CSS الخاص بك
tailwind.config.js يتحكم في الملفات التي يتم فحصها ويخصص نظام التصميم
postcss.config.js يدمج Tailwind مع خط أنابيب بناء PostCSS
امتداد VS Code IntelliSense يوفر الإكمال التلقائي ومعاينات التحويم
وضع JIT يولد CSS عند الطلب لبناء فوري وملفات أصغر
الإضافات الرسمية تمتد Tailwind للطباعة والنماذج والمزيد

الآن بعد تثبيت Tailwind وتكوينه، أنت مستعد لبدء البناء بـ Utility-First CSS! في الدرس التالي، سنغوص في أساسيات Utility-First ونتعلم كيفية التفكير في الأدوات.