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

ما هو Tailwind CSS؟

Tailwind CSS إنه إطار عمل CSS يولي الأولوية للوظائف (Functionality)، حيث يساعد المطورين على بناء واجهات مستخدم مخصصة بسرعة من خلال توفير عدد كبير من الفئات العملية (Utility Classes) القابلة للدمج مع بعضها البعض. على عكس الإطارات الأخرى مثل Bootstrap التي توفر مكونات محددة مسبقًا مثل الأزرار والبطاقات (Cards)، فإن Tailwind لا يوفر أي مكونات جاهزة للاستخدام، بل يقدم مجموعة من الفئات الأساسية (Atomic Classes) منخفضة المستوى. .text-center、.p-4、.bg-blue-500يقوم المطورون بـ“تجميع” الأنماط المطلوبة عن طريق كتابة هذه الفئات (الكلاسات) مباشرةً على عناصر HTML.

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

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

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

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

يتم التثبيت باستخدام أداة سطر الأوامر (CLI – Command Line Interface).

أولاً، يجب عليك إجراء عملية التهيئة (الإنشاء الأولي) للمشروع ضمن النظام. Tailwind CSSيُعد تثبيت أداة الواجهة السطرية (CLI) عبر npm أو yarn وإنشاء ملفات الإعدادات من أفضل الممارسات. قم بتنفيذ الأوامر التالية في المجلد الرئيسي للمشروع:

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

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

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

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

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

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

العرض 40%

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

npm install -D tailwindcss
npx tailwindcss init

سيقوم هذا بإنشاء عنصر في مشروعك يحمل الاسم… tailwind.config.js ملف الإعدادات. بعد ذلك، ستحتاج إلى إنشاء ملف CSS رئيسي (على سبيل المثال)... src/input.css)، واستخدم @tailwind التعليمات المستخدمة لتضمين مختلف طبقات Tailwind…

/* src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

بعد ذلك، في tailwind.config.js في ملف الإعدادات، حدد مسار ملفات القوالب الخاصة بك، حتى يتمكن Tailwind من مسح هذه الملفات وإنشاء الكود CSS المناسب بناءً عليها.

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

أخيرًا، قم بتشغيل أمر سطر الأوامر (CLI) لبناء ملف CSS النهائي.

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

هذا الأمر سيقوم بمراقبة أي تغييرات في ملفاتك المصدرية، وسيقوم تلقائيًا بتجميع (ترجمة) الفئات البرمجية المطلوبة إلى شكل يمكن استخدامه في البرنامج في الوقت الفعلي. ./dist/output.css الملف موجود داخل المستندات؛ كل ما عليك فعله هو إدخال ملف CSS الناتج إلى كود HTML الخاص بك.

القراءة الموصى بها دليل شامل لتعلم CSS من Tailwind: بناء واجهات مستخدم رائعة ومتجاوبة من الصفر。

الفئات الأساسية والعملية والتصميم التكيفي (Core Practical Classes and Responsive Design)

Tailwind CSS تغطي الفئات العملية (practical classes) معظم خصائص CSS مثل التخطيط (layout)، المسافات (spacing)، التنسيق (formatting)، الألوان (colors)، الحواف (bounds)، والتأثيرات (effects). قواعد التسمية فيها واضحة ومتسقة؛ على سبيل المثال، يتم استخدام مص p-{size} يشير إلى المسافة الداخلية (الحشوة) بين العناصر المختلفة في الواجهة.m-{size} يشير إلى المسافات الخارجية (الهوامش)؛ يتم استخدامه لتحديد عرض وارتفاع العناصر على الصفحة. w-{size} و h-{size}。

التصميم التفاعلي (Responsive Design) هو أحد نقاط قوة Tailwind CSS. يستخدم Tailwind نظام نقاط القطع (Breakpoints) القائم على مبدأ “الأولوية للأجهزة المحمولة” (Mobile First). النقاط الافتراضية للقطع هي:sm(640 بكسل)md(768 بكسل)lg(1024 بكسل)xl(1280 بكسل)2xl(1536 بكسل). لتطبيق الأنماط على أحجام الشاشات المختلفة، ما عليك سوى إضافة بادئة النقطة المناسبة قبل الفئة المستخدمة.

على سبيل المثال، الكود أدناه يقوم بإنشاء عنصر واجهة مستخدم يتم ترتيب عناصره تلقائيًا بشكل متداخل على الأجهزة المحمولة، ويتم ترتيبها أفقيًا على الشاشات متوسطة الحجم والأكبر:

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

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

قم بزيارة Bluehost

<div class="flex flex-col md:flex-row">
  <div class="p-4 bg-blue-100 md:w-1/2">المحتوى على الجانب الأيسر.</div>
  <div class="p-4 bg-green-100 md:w-1/2">المحتوى على الجانب الأيمن.</div>
</div>

في هذا المثال،flex-col إنه النمط الافتراضي (للأجهزة المحمولة)،md:flex-row يعني “يُظهر أن…” أو “يُشير إلى أن…” md في النقاط المحددة (الـ “Breakpoints”) والشاشات التالية لها، يتغير اتجاه الحاويات المرنة (Elastic Containers) إلى أفقي (أي أنها تصبح عبارة عن صفوف). وبالمثل، يتغير عرض هذه الحاويات أيضًا. md:w-1/2 وهو يعمل أيضًا فقط على الشاشات المتوسطة والأكبر فقط.

المواضيع المخصصة والإضافات (Custom Themes and Plugins)

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

توسيع الإعدادات الافتراضية

يمكنك… theme.extend يتم إضافة قيم جديدة إلى الكائن دون أن تغطي القيم الافتراضية، بل يتم توسيع محتويات الكائن فقط. على سبيل المثال، يمكن إضافة ألوان مخصصة، خطوط نصية معينة، أو قيم للمسافات بين العناصر.

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

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-primary': '#1d4ed8',
        'brand-secondary': '#7e22ce',
      },
      fontFamily: {
        'sans': ['Inter var', 'system-ui', 'sans-serif'],
      },
      spacing: {
        '72': '18rem',
        '84': '21rem',
      }
    },
  },
}

بعد القيام بالتخصيص، يمكنك استخدامه في كود HTML الخاص بك. text-brand-primary、font-sans و p-84 هكذا هي الفئة.

استخدم الإضافات الرسمية وإضافات المجتمع.

Tailwind CSS يسمح نظام الإضافات (plugins) بإنشاء فئات (classes) عملية خاصة بك. توفر الشركة المطورة بعض الإضافات المفيدة للغاية، مثل… @tailwindcss/forms(يُستخدم لتحسين مظهر عناصر النموذج)@tailwindcss/typography(يُستخدم لتوفير تنسيق جميل للمحتوى HTML غير القابل للتحكم فيه). بعد التثبيت، ما عليك سوى تعديل ملفات الإعدادات المناسبة. plugins فقط أدخلها في المصفوفة.

hosting.com

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

قم بزيارة hosting.com

npm install @tailwindcss/typography

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/typography'),
    // ... 其他插件
  ],
}

بعد ذلك، يمكنك استخدامه مع أي حاوية. prose هذه الفئة تجعل المحتوى الHTML الموجود داخلها يحصل تلقائيًا على تنسيق جميل ومرتب.

بناء مكونات معقدة

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

على سبيل المثال، يمكنك تعريف أسلوب زر مخصص:

/* 在你的 CSS 文件中 */
.btn-primary {
  @apply py-2 px-4 bg-brand-primary text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 transition duration-150 ease-in-out;
}

ثم، استخدم اسم هذا الكلاس مباشرة في HTML:

<button class="btn-primary">点击我</button>

هذه الطريقة تجمع بين مرونة الأساليب العملية وقابلية الصيانة الخاصة بلغة CSS التقليدية. بالنسبة للمشاريع المبنية على أطر JavaScript مثل React أو Vue، عادةً ما يتم كتابة هذه الأنماط مباشرةً داخل قوالب المكونات (components templates)، مما يسمح بتغليف الأنماط والهيكل والمنطق معًا بشكل وثيق.

الملخصات

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

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

هل ملفات CSS التي يتم إنشاؤها بواسطة Tailwind CSS ستكون كبيرة جدًا؟

لا. في بيئة الإنتاج،Tailwind CSS يتم استخدام تقنية PurgeCSS (التي تم دمجها الآن وتُعرف باسم “content scanning”) لمسح جميع ملفات القوالب التي حددتها في ملف الإعدادات (مثل HTML، JSX، Vue)، وتقوم فقط بتضمين الكلاسات الفعلية المستخدمة في ملف CSS النهائي. هذا يضمن أن ملف CSS الناتج يكون مضغوطًا للغاية، حيث يتراوح حجمه عادةً بين بضع كيلوبايتات وعشرات الكيلوبايتات فقط.

كيف يمكن الحفاظ على تناسق الأسلوب (التصميم) في مشاريع الفريق؟

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

ما الفرق بين Tailwind CSS والحلول التقليدية لاستخدام CSS داخل JavaScript (مثل styled-components)؟

لكل منهما أهداف مختلفة، ولكن يمكن أن يكملا بعضهما البعض.Tailwind CSS أعمل بشكل أساسي في مستوى HTML/القوالب، حيث أقوم بتطبيق الأنماط من خلال تركيبات أسماء الفئات (class names)، مع التركيز على الجانبين العملي وسرعة التطوير. أما تقنية CSS-in-JS فهي تقوم بإنشاء الأنماط بشكل ديناميكي أثناء تشغيل JavaScript، وهي مثالية للتعامل مع الأنماط المتغيرة بشكل كبير والمعتمدة على الحالة (state-dependent styles)، كما أنها توفر عزلًا ممتازًا بين الأنماط المختلفة. في المشاريع العملية، يمكن للمطورين اختيار أي من هاتين التقنيتين حسب احتياجاتهم، أو حتى استخدامهما معًا؛ على سبيل المثال، يمكن استخدام Tailwind للتعامل مع التخطيط الأساسي والأنماط العامة، بينما يمكن استخدام CSS-in-JS للتعامل مع الأنماط الدي

هل يتطلب تعلم لغة Tailwind CSS معرفة أساسية جيدة بلغة CSS؟

من الضروري امتلاك معرفة أساسية بلغة CSS، ولكن ليس من الضروري أن تصبح خبيرًا فيها. في الواقع،Tailwind CSS أسماء الفئات تتوافق بشكل كبير مع خصائص CSS (مثل…) flex, justify-center, text-whiteعملية تعلم Tailwind تعتبر أيضًا فرصة رائعة لتعلم أفضل الممارسات في استخدام لغة CSS. بالنسبة للمبتدئين، يمكن أن يكون Tailwind مثل “عكاز” يساعدهم على تجنب الأخطاء الشائعة عند كتابة كود CSS معقد بشكل مباشر. مع تطور مهاراتك في استخدام فئات Tailwind، سيتحسن فهمك للغة CSS الأساسية تدريجيًا أيضًا.