دليل Tailwind CSS النهائي: دليل عملي شامل، من البداية إلى الإتقان.

ما هو Tailwind CSS؟

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

يعني هذا الأسلوب الذي يعطي الأولوية للعملية العملية (practicality) أن المطورين لم يعودوا بحاجة إلى كتابة أكواد CSS مخصصة للمكونات، ولا يحتاجون إلى التنقل بشكل متكرر بين ملفات HTML وCSS. وذلك عن طريق تطبيق مجموعة من الأوامر مباشرةً داخل ملف HTML… text-blue-600、p-4、bg-gray-100 يمكنك تعيين لون النص والهامش الداخلي ولون الخلفية باستخدام طبقات CSS. وهذا يزيد بشكل كبير من كفاءة التطوير، ويؤدي إلى ارتباط الأسلوب بالبنية بشكل وثيق، مما يقلل من حجم ملفات CSS وتعقيدها.

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

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

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

تثبيته عبر npm أو yarn.

أولاً، قم بتهيئة المشروع من خلال مدير الحزمات وتثبيت Tailwind CSS واعتماداته. والأمر الأساسي هو التثبيت. tailwindcss、postcss و autoprefixer。

npm install -D tailwindcss postcss autoprefixer

بعد الانتهاء من التثبيت، قم بتشغيل الأمر التالي لإنشاء ملف تكوين لـ Tailwind CSS و PostCSS. قم بتنفيذه. npx tailwindcss init -p سيتم إنشاؤها في نفس الوقت. tailwind.config.js و postcss.config.js ملف.

npx tailwindcss init -p

تكوين مسار قالب

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

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

تعليمات استيراد الأنماط.

في أي ملف CSS رئيسي لديك (على سبيل المثال، In your main CSS file (for example, src/styles.css أو src/index.cssفي هذا البرنامج، يتم استخدام @tailwind تعليمات لإدخال الأنماط الأساسية لـ Tailwind.

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

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

الطرائق الأساسية العملية والشائعة.

أسماء فئات Tailwind CSS شديدة الدلالة وقابلة للتنبؤ، وتتبع نمطًا بسيطًا للتسمية: خاصية - قيمة (أو خاصية - نقطة انكسار - قيمة).

التخطيط والمسافات

هذه هي المجموعة الأكثر شيوعًا من الفئات. على سبيل المثال،flex يُستخدم لإعداد تخطيط الصندوق المرن،p-4 أظهر padding: 1remتم استخدام الهوامش. m-*، استخدم الهوامش الداخلية. p-*عادةً ما تتوافق الأرقام مع نظام تباعد مقياسي بشكل تناسبي (مثل 0، 1، 2، 4، 6).

<div class="flex justify-between items-center p-4">
  <div class="ml-2">اليسار.</div>
  <div class="mr-2">اليمين.</div>
</div>

الألوان والخلفية

يمكنك بسهولة ضبط لون النص، ولون الخلفية، ولون الإطار. يوفر نظام الألوان لوحة ألوان غنية، مثل: text-blue-500、bg-gray-100、border-red-300\n. كلما كان الرقم أكبر، كان لون اللون عادةً أغمق (على سبيل المثال،blue-100 إنهُ ضحل جدًا.blue-900 إنه أمر محزن للغاية.

تصميم متجاوب

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

<div class="text-base md:text-lg lg:text-xl">
  يتم استخدام هذا النص بحجم أساسي على الهاتف، ويصبح أكبر حجمًا على الجهاز اللوحي، وأكبر حجمًا أيضًا على سطح المكتب.
</div>

حالات التعليق والتركيز وما إلى ذلك.

يمكنك تعيين أنماط لحالات مختلفة من العناصر عن طريق إضافة بادئات الحالة. على سبيل المثال،hover:bg-blue-600 سوف يغير لون الخلفية عندما يتم وضع الماوس فوقه.focus:ring-2 سيتم إضافة إطار دائري عندما يحظى العنصر بتركيز الاهتمام.

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  悬停有效果的按钮
</button>

تقنيات متقدمة وتهيئة مخصصة.

بمجرد أن تتقن الأساسيات، يمكنك الاستفادة من إمكانيات Tailwind من خلال بعض التقنيات المتقدمة والتهيئات المخصصة.

استخراج فئات المكونات (Extracting Component Classes)

على الرغم من أن مبدأ "الاستخدامية أولاً" هو الفلسفة الأساسية، إلا أنه لتجنب تكرار قوائم الفئات الطويلة في HTML، يمكنك استخدام… @apply يقوم الأمر باستخراج مجموعات الأنماط الشائعة وإعادة استخدامها في CSS، مما يسمح لك بإنشاء “فئات المكونات” الخاصة بك.

/* 在你的 CSS 文件中 */
.btn-primary {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700;
}

ثم، في HTML، يكفي استخدام… class="btn-primary" يمكنك الآن إرسال الرسالة.

نظام التصميم المخصص.

يمكن تكوين جميع القيم الافتراضية لـ Tailwind. عن طريق تعديلها. tailwind.config.js يمكنك تخصيص الألوان والخطوط وحجم المسافات ونقاط التقسيم وما إلى ذلك في المستند، بحيث تتوافق تمامًا مع معايير العلامة التجارية أو التصميم الخاصة بك.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
      },
      spacing: {
        '72': '18rem',
        '84': '21rem',
      }
    },
  },
}

بعد تعريفه، يمكنك استخدامه. text-brand-blue أو p-84 مثل هذه الفئات المخصصة.

استخدام وضع JIT (Just-In-Time Compilation)

اعتبارًا من Tailwind CSS v2.1+، تم إدخال محرك Just-in-Time (JIT). سيقوم بإنشاء CSS المطلوب ديناميكيًا عند كتابة القالب، بدلاً من إنشاء ملف CSS ضخم يحتوي على جميع الفئات المحتملة مقدمًا. يؤدي ذلك إلى تحسين كبير في الأداء ويدعم بعض الميزات التي لا يمكن تحقيقها في الوضع التقليدي، مثل تنوع القيم العشوائية.

لتمكين وضع JIT، ما عليك سوى الانتقال إلى tailwind.config.js إعدادات في المنتصف. mode: 'jit'。

// tailwind.config.js
module.exports = {
  mode: 'jit',
  // ... 其他配置
}

بعد التفعيل، يمكنك حتى استخدام أشياء مثل w-[200px] أو top-[-10px] توفر فئات القيم العشوائية هذه مرونة كبيرة للتطوير.

الملخصات

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

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

هل قد يؤدي استخدام Tailwind CSS إلى جعل ملفات HTML ثقيلة ومعقدة؟

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

ومع ذلك، فإن هذا “التضخم” هو أمر منظم ويمكن التنبؤ به، وهو في الواقع ينقل تعقيد الأسلوب من CSS إلى HTML، الأمر الذي يسهل إدارته. والأهم من ذلك، أنه من خلال التكوين، content وباستخدام أدوات بناء الإنتاج، يتم إزالة جميع فئات CSS غير المستخدمة من المسار، وعادةً ما تكون ملفات CSS الناتجة أصغر بكثير من ملفات CSS التقليدية المكتوبة يدويًا أو باستخدام مكتبات المكونات. ولذلك، فإن الأداء يكون أفضل بكثير.

كيف يمكن تغطية أو تعديل الأنماط الافتراضية لـ Tailwind CSS؟

يمكنك تغطية النمط الافتراضي بعدة طرق. أفضل طريقة موصى بها هي tailwind.config.js مستندات theme.extend يمكن توسيع بعض الأجزاء، مما يسمح بإضافة قيم جديدة دون التأثير على النظام الأصلي. إذا أردت استبدال مفتاح موضوع معين بالكامل (مثل الألوان)، فقم بذلك مباشرةً في theme أعد تعريفه. بالإضافة إلى ذلك، استخدم قبل الفئات العملية. !important الكلمات المعدلة (مثل ) !text-red-500أو يمكنك استخدام محددات الانتقاء الأعلى في CSS لتحقيق تغطية النمط أيضًا.

ما هي الإطارات الأمامية (front-end frameworks) التي يناسب استخدامها مع Tailwind CSS؟

يتكامل Tailwind CSS بشكل مثالي مع جميع أطر العمل الحديثة تقريبًا للواجهة الأمامية. وهو يدعم React و Vue و Angular و Svelte وغيرها بشكل أصلي. كل ما عليك فعله هو التأكد من استخدام أسماء الفئات بشكل صحيح في قالب الإطار أو JSX، وتكوين PostCSS و Tailwind في عملية البناء. تقدم العديد من الأطر (مثل Next.js و Vite) حتى أمثلة تكامل رسمية لـ Tailwind CSS أو مكونات إضافية، مما يجعل عملية التكامل أكثر سلاسة.

هل يتطلب استخدام Tailwind CSS التخلي عن كتابة CSS يدويًا؟

ليس ذلك ضروريًا على الإطلاق. Tailwind CSS لا يستبعد CSS المكتوب يدويًا، بل يكمله. لا يزال بإمكانك كتابة ملفات CSS مخصصة في مشروعك. Tailwind's @apply تسمح التعليمات لك بإعادة استخدام فئات الأدوات في الـ CSS المخصص. ومع ذلك، لا يزال من الضروري كتابة CSS يدويًا للحالات التي تكون فيها أنماط معينة فريدة جدًا، بحيث لا يمكن تحقيقها باستخدام مجموعات من الفئات العملية، أو عندما تتطلب ميزات CSS معقدة (مثل الرسوم المتحركة للإطارات الرئيسية). يقدم Tailwind فقط طريقة أكثر كفاءة للتعامل مع متطلبات الأنماط الشائعة في المشروعات، التي تزيد عن 90%.