دليل مبتدئين لـ Tailwind CSS: بناء صفحات ويب حديثة ومتجاوبة من الصفر

ما هو Tailwind CSS؟

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

فلسفتها الأساسية هي “الأولوية للمنفعة العملية”. وهذا يعني أنك لست بحاجة إلى .css كتابة عدد كبير من الأنماط المخصصة في الملفات، ولا حاجة أيضًا للانشغال بكيفية جعل أسماء الأصناف ذات دلالة. بدلًا من ذلك، يمكنك استخدام شيء مثل text-blue-500、p-4、rounded-lg أسماء فئات وصفية كهذه لتطبيق الأنماط بسرعة. يسرّع هذا الأسلوب بشكل كبير عملية بناء واجهة المستخدم، ويحافظ على صِغر حجم ورقة الأنماط، لأنه من خلال أدوات البناء (مثل PurgeCSS) يمكن إزالة الأنماط غير المستخدمة بسهولة، مما ينتج في النهاية ملف إنتاج صغيرًا جدًا.

كيفية البدء في استخدام Tailwind CSS؟

ابدأ باستخدام Tailwind CSS هناك عدة طرق، وأكثرها توصية هي التثبيت عبر إضافة PostCSS الرسمية الخاصة به، إذ يوفّر ذلك أفضل تجربة تطوير وأعلى كفاءة في تحسين الإنتاج.

القراءة الموصى بها دليل عملي لتعلم لغة Tailwind CSS من الصفر إلى الاحتراف: بناء صفحات ويب حديثة ومتجاوبة。

تثبيت الحزمة الأساسية عبر npm

أولاً، تحتاج إلى تهيئة مشروع (إذا لم يكن قد تم تهيئته بعد)، ثم تثبيت التبعيات اللازمة عبر npm أو yarn. أمر التثبيت الأساسي هو npm install -D tailwindcss postcss autoprefixerهنا،postcss و autoprefixer إنها أداة ضرورية لمعالجة CSS.

مساعد منشئ مواقع الويب WordPress.com

إتاحة 99.999% 99.999% + التعافي من الكوارث عبر المناطق، دعم على مدار الساعة طوال أيام الأسبوع، موقع مجاني لبناء موقع ذكاء اصطناعي مع شراء باقة المدونة

اسم نطاق مجاني لمدة عام واحد

قم بزيارة مساعد منشئ مواقع الويب ووردبريس.كوم →

مساعد منشئ مواقع الويب UltaHost

أكثر من 900 قالب مجاني وقابل للتخصيص للحصول على قوة تحسين محركات البحث التي تحتاجها لتحسين موقعك الإلكتروني من أجل عرض البحث

العرض 40%

قم بزيارة مساعد منشئ مواقع الويب UltaHost →

بعد اكتمال التثبيت، تحتاج إلى إنشاء Tailwind CSS ملف التكوين. شغّل الأمر npx tailwindcss init سيتم إنشاء عنصر باسم في الدليل الجذر للمشروع tailwind.config.js الملف. هذا الملف هو جوهر نظام التصميم المخصص الخاص بك (مثل الألوان، والتباعد، ونقاط التوقف).

إعداد PostCSS واستيراد الأنماط الأساسية

بعد ذلك، ستحتاج إلى تعديل ملف الإعدادات الخاص بـ PostCSS (الذي عادةً ما يكون…) postcss.config.jsأضف إلى （） tailwindcss و autoprefixer كإضافة (plugin)… وأخيرًا، في ملف CSS الرئيسي الخاص بك (مثل…) src/styles.css أو input.cssفي النص المقدم، يتم التعبير عن عملية ما من خلال استخدام عبارة “من خلال”. @tailwind إدخال التعليمات Tailwind CSS كل طبقة من طبقاته.

محتوى ملف CSS الرئيسي النموذجي يكون كالتالي:

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

تُدخل هذه التعليمات الثلاثة على التوالي الأنماط الأساسية (لإعادة تعيين الأنماط الافتراضية للمتصفح)، وفئات المكوّنات (لاستخراج تركيبات فئات الأدوات المساعدة المتكررة)، وجميع فئات الأدوات المساعدة.

القراءة الموصى بها دليل Tailwind CSS النهائي: تطوير فعال باستخدام إطار CSS الحديث، من الأساسيات إلى الممارسة العملية.。

المفاهيم الأساسية وقواعد الكتابة العملية

إتقان Tailwind CSS المفتاح يكمن في فهم قواعد تسمية الفئات العملية (functional classes) وطرق التصميم التكيفي (responsive design methods).

قواعد التسمية للفئات العملية

Tailwind CSS أسماء الفئات تتبع مجموعة من القواعد البديهية. معظم أسماء الفئات تتكون من اختصارات للخصائص والقيم، مع ربطها بواسطة علامة الهاش (–). على سبيل المثال:
* m-4 أظهر margin: 1rem; (4 هي وحدة في مقياس المسافات النسبية).
* p-2 أظهر padding: 0.5rem;。
* text-center أظهر text-align: center;。
* bg-blue-600 يشير ذلك إلى أن لون الخلفية هو اللون الموجود في اللوحة الألوان الزرقاء والذي يحمل الرقم 600.
* hover:bg-blue-700 يعني ذلك أن التأثير أو الوظيفة المطلوبة ستتم تطبيقها عندما يتم تحريك الماوس فوق العنصر المعني. bg-blue-700 الأسلوب (Style).

هذه الطريقة في التسمية تسمح للمطورين بتخمين وظيفة أسماء الكلاسات بشكل تقريبي حتى بدون الحاجة إلى قراءة الوثائق. يوفر الإطار مجموعة واسعة جدًا من الكلاسات التي تغطي جميع خصائص CSS مثل التخطيط (Flexbox، Grid)، المسافات بين العناصر، التنسيق، الخلفيات، الحواف، التأثيرات البصرية، الرسوم المتحركة، وغيرها.

منشئ مواقع الويب Bluehost

تقدم أداة إنشاء مواقع الويب بالذكاء الاصطناعي، ودعم عبر الدردشة المباشرة والدعم عبر الهاتف على مدار الساعة طوال أيام الأسبوع، واسم نطاق مجاني لمدة عام واحد، وشبكة CDN مجانية، واتفاقية مستوى الخدمة 99.99%

قم بزيارة Bluehost

التصميم التفاعلي (Responsive Design) ورموز النقاط المحددة للتحكم في الأداء (Breakpoint Prefixes)

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

المسافات المحددة مسبقًا (الـ “breakpoints”) المدمجة في النظام تحتوي على الرموز التالية:
* sm: (640 بكسل)
* md: (768 بكسل)
* lg: (1024 بكسل)
* xl: (1280 بكسل)
* 2xl: (1536 بكسل)

على سبيل المثال.<div class="text-sm md:text-base lg:text-lg"> يعني ذلك أن حجم الخط يكون صغيرًا على الأجهزة المحمولة، ويتغير إلى الحجم الأساسي على الشاشات المتوسطة، ويصبح كبيرًا على الشاشات الكبيرة. يمكنك استخدام هذا الإعداد لتخصيص تجربة المستخدم ب tailwind.config.js مستندات theme.screens يمكن تخصيص قيم نقاط التوقف (breakpoints) بسهولة في بعض الحالات.

القراءة الموصى بها تحليل متعمق لـ Tailwind CSS: دليل إطار عمل الأنماط العملي لتطوير الواجهات الأمامية الحديثة。

بناء مكون بطاقة (card component) يتكيف مع الشاشات المختلفة (متجاوب).

دعونا نطبق المفاهيم المذكورة أعلاه من خلال مثال كامل، ونبني بطاقة بسيطة تتكيف مع أحجام الشاشات المختلفة (بطاقة ردية – responsive card).

كتابة هيكل HTML والأنماط الأساسية

سنقوم بإنشاء بطاقة تحتوي على صورة، عنوان، وصف، وزر. أولاً، سنستخدم فئة الحاوية (container class). max-w-sm قم بتحديد الحد الأقصى لعرض البطاقة، وطبق عليها زوايا مستديرة وظلال، بالإضافة إلى تقنية إخفاء المحتوى الذي يتجاوز حدود البطاقة (الoverflow hiding) لتحديد الشكل الأساسي للبطاقة.

hosting.com

SSL مجاني، Cloudflare CDN، Cloudflare CDN، WAF، أكثر من 40 غرفة خوادم عالمية للاختيار من بينها، ووقت استجابة أقل بالقرب منك، ودعم الخدمة على مدار الساعة طوال أيام الأسبوع/365، يمكنك الآن توفير ما يصل إلى 671 تيرابايت، ودعم إنشاءات الذكاء الاصطناعي وتحسين محركات البحث!

قم بزيارة hosting.com

<div class="max-w-sm rounded-xl overflow-hidden shadow-lg bg-white mx-auto my-8">
  <img class="w-full h-48 object-cover" src="/img/card-image.jpg" alt="صورة البطاقة">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">بطاقات Tailwind CSS العملية</div>
    <p class="text-gray-700 text-base">
      هذا مكوّن بطاقة متجاوب تم بناؤه بسرعة باستخدام فئات Tailwind CSS العملية. يمكن تحقيق واجهة مستخدم جميلة دون كتابة سطر واحد من CSS مخصص.
    </p>
  </div>
  <div class="px-6 pt-4 pb-6">
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300">
      اعرف المزيد
    </button>
  </div>
</div>

إضافة تأثيرات تفاعلية تتكيف مع أحجام الشاشات المختلفة (تأثيرات استجابية).

الآن، سنضيف خصائص استجابة للتغييرات في حجم الشاشة (خصائص “التصميم الديناميكي”) إلى البطاقات. نريد أن يتغير تخطيط البطاقات على الشاشات الكبيرة، وأن تكون ردود أفعال الأزرار أكثر وضوحً

لقد قمنا بتعديل الحاوية الخارجية للبطاقة والأزرار.

<div class="max-w-sm md:max-w-md lg:max-w-lg rounded-xl overflow-hidden shadow-lg bg-white mx-auto my-8 hover:shadow-2xl transition-shadow duration-300">
  <!-- 图片和内容部分保持不变 -->
  <div class="px-6 pt-4 pb-6">
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 transform hover:-translate-y-1 hover:scale-105">
      اعرف المزيد
    </button>
  </div>
</div>

• أضفنا إلى الحاوية الخارجية md:max-w-md و lg:max-w-lg، مما يجعل البطاقة تتسع تدريجيًا عند نقاط التوقف المختلفة.
• تمت الإضافة hover:shadow-2xl و transition-shadow تنفيذ حركة ظل عند التحويم.
• تمت الإضافة إلى الزر transform、hover:-translate-y-1 و hover:scale-105، لتحقيق تأثير الارتفاع الطفيف والتكبير عند التحويم.

تحسين بيئة الإنتاج والتخصيص

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

إزالة الأنماط غير المستخدمة باستخدام PurgeCSS

Tailwind CSS مع PurgeCSS تكامل عميق. ما عليك سوى أن tailwind.config.js تمت تهيئته بشكل صحيح في الملف content الخيار، يحدد مسارات جميع القوالب والمكونات وملفات HTML في المشروع. عند إنشاء نسخة الإنتاج، ستقوم أداة البناء بتحليل هذه الملفات وإزالة جميع الأنماط غير المستخدمة تلقائيًا من ملف CSS النهائي Tailwind CSS الفئة (Class).

مثال أساسي على الإعدادات كالتالي:

// tailwind.config.js
module.exports = {
  content: [‘./src/**/*.{html,js,jsx,ts,tsx,vue}’], // 根据你的项目结构调整
  theme: {
    extend: {},
  },
  plugins: [],
}

توسيع وتخصيص رموز التصميم (Design Tokens)

يمكنك… tailwind.config.js أنا أحبك، أيها الأخ الأكبر. theme.extend يمكن توسيع المواضيع الافتراضية بسهولة في بعض الأحيان. على سبيل المثال، يمكن إضافة لون مخصص أو قيمة جديدة للمسافة بين العناصر:

module.exports = {
  theme: {
    extend: {
      colors: {
        ‘brand-blue’: ‘#1a365d’,
      },
      spacing: {
        ‘128’: ‘32rem’,
      }
    },
  },
}

بعد ذلك، يمكنك استخدامه في المشروع. bg-brand-blue أو h-128 مثل هذه الفئات. يضمن هذا الأسلوب المخصص أن نظام التصميم الخاص بك و Tailwind CSS تم دمج عمليات العمل بشكل سلس مع بعضها البعض.

الملخصات

Tailwind CSS من خلال مفهومه “الأولوية للعملية” (Practicality First)، قام هذا الأداة بتغيير جذري في طريقة مبرمجي الويب في كتابة أكواد CSS. فهو يوفر مجموعة كاملة ومنظمة من الكلاسات (classes) الأساسية، مما يجعل عملية تصميم النماذج الأولية بسرعة وبناء واجهات مستخدم متناسقة ومتجاوبة أمرًا فعالًا للغاية. قد يتطلب الأمر من المبتدئين حفظ بعض أسماء هذه الكلاسات، لكن قواعد التسمية الواضحة والوثائق المتميزة تساعدك على التعود على استخدامها بسرعة. بالإضافة إلى ذلك، فإن الأداة تتميTailwind CSS أصبح خيارًا مثاليًا بدءًا من المشاريع الفردية وصولًا إلى التطبيقات المؤسسية الكبيرة، وقادرًا على تحسين تجربة التطوير بشكل ملحوظ والحفاظ على جودة عالية لشفرة الأنماط.

الأسئلة الشائعة الأسئلة المتداولة

هل يجعل Tailwind CSS لغة HTML تبدو فوضوية؟

هذا بالفعل مصدر قلق شائع. إن تكديس عدد كبير من أسماء الأصناف في HTML قد يبدو في البداية فوضويًا. ومع ذلك، يرى كثير من المطورين أن هذا نوع من المقايضة: إذ إن نقل قرارات التنسيق من ملفات CSS إلى الوسوم يزيد فعليًا من سهولة القراءة وقابلية الصيانة، لأنك لا تحتاج إلى التنقل بين الملفات لمعرفة النمط الكامل لعنصر ما. بالإضافة إلى ذلك، بالنسبة للمكونات المتكررة، يمكنك استخدام @apply استخرج التركيبات المشتركة للفئات في CSS، أو ادمجها مع أطر عمل المكونات (مثل React وVue) للحفاظ على نظافة القوالب.

كيفية تجاوز أو إضافة الأنماط غير الموجودة في Tailwind؟

بالنسبة للأنماط المخصصة بالكامل، لديك عدة خيارات. أولاً، يمكنك أن تقوم بـ tailwind.config.js قم بتوسيع السمة في، وهذه هي الطريقة المفضلة. ثانيًا، يمكنك في ملف CSS الخاص بك، في @tailwind utilities; اكتب أي CSS مخصص بعد التعليمات. وأخيرًا، بالنسبة لنمط واحد، يمكنك استخدام صيغة الأقواس المربعة لتوليد أي قيمة بشكل مضمّن، مثل top-[117px] أو bg-[#1a365d]، وهذا يوفر مرونة كبيرة.

كيف هو أداء Tailwind CSS؟

في وضع التطوير، تكون ملفات CSS أكبر حجمًا نظرًا لاحتوائها على جميع الفئات (classes). ولكن في بيئة الإنتاج، عندما يتم تكوينها بشكل صحيح… content بعد تعيين المسار وتمكين تحسينات البناء،Tailwind CSS سيزيل جميع الأنماط غير المستخدمة، وعادة ما يكون ملف CSS الناتج النهائي أصغر بكثير من الأطر الأخرى، بل وحتى أصغر من كثير من ملفات CSS المكتوبة يدويًا، لذلك يكون الأداء ممتازًا للغاية.

ما هي الأطر أو التقنيات التي يناسب استخدامها معها؟

Tailwind CSS إنه مستقل عن أي إطار عمل ويمكن أن يتكامل بشكل مثالي مع أي تقنية تستخدم HTML وCSS. وهو شائع بشكل خاص عند استخدامه مع أطر الواجهة الأمامية الحديثة أو الأطر الوصفية مثل React وVue.js وAngular وNext.js وNuxt.js وSvelte وغيرها. كما أن منهجه القائم على الفئات النفعية ينسجم بشكل ممتاز مع فكرة المكونات في هذه الأطر.