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

ما هو Tailwind CSS؟

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

الفلسفة الأساسية هي “الأداة المساعدة أولًا”. وهذا يعني أنك تقوم بتعيين الأنماط مباشرةً في HTML عن طريق تطبيق اسم الفئة، على سبيل المثال باستخدام <code>text-blue-500</code> لتعيين النص الأزرق، استخدم أداة <code>p-4</code> لتعيين الهوامش الداخلية. يعمل هذا النهج على تسريع عملية التطوير بشكل كبير لأنك لم تعد بحاجة إلى التبديل بين ملفات HTML و CSS ذهابًا وإيابًا للحصول على نمط بسيط، أو إرهاق عقلك حول كيفية تحديد أسماء الفئات. في الوقت نفسه، نظرًا لأن نظام تصميم Tailwind مدمج في نظام Tailwind، فإنه يضمن بقاء عناصر التصميم مثل المسافات والألوان وأحجام الخطوط وما إلى ذلك متسقة في جميع أنحاء المشروع.

ميزة رئيسية أخرى هي نهج التصميم المتجاوب؛ يستخدم Tailwind البادئات لتحديد نمط نقاط التوقف المختلفة، على سبيل المثال <code>md:text-center</code> يشير إلى أنه سيتم توسيط النص في أحجام الشاشة المتوسطة وما فوق. وهذا يجعل إنشاء تخطيطات متجاوبة بديهية وفعالة بشكل لا يصدق.

القراءة الموصى بها يمكنك إنشاء واجهات ويب حديثة ومتجاوبة بكفاءة باستخدام Tailwind CSS.。

كيفية التثبيت والتكوين

هناك العديد من الطرق لبدء استخدام Tailwind CSS، وأكثر الطرق الموصى بها هي من خلال أداة CLI الرسمية أو التكامل مع أدوات الإنشاء (مثل Vite و Webpack). فيما يلي الإجراء القياسي للتثبيت والتهيئة عبر Node.js و CLI.

أولاً، تحتاج إلى دليل مشروع وتهيئة npm. ثم قم بتثبيت Tailwind CSS وتوابعه عبر npm.

npm init -y
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

يقوم الأمر أعلاه بتثبيت Tailwind CSS و PostCSS (أداة لتحويل CSS) و Autoprefixer (الذي يضيف بادئات المتصفح تلقائيًا)، وينشئ ملف تهيئة افتراضي tailwind.config.js。

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

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

ثم، قم بإنشاء ملف CSS رئيسي (على سبيل المثال: src/input.css)، واستيراد أوامر Tailwind إليه.

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

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

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

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

الآن، يمكنك ربط الناتج output.cssوالبدء في استخدام فئات Tailwind المساعدة.

فئات المرافق الأساسية والتخطيطات

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

نماذج التخطيط والصناديق

يوفر Tailwind فئات شاملة للتحكم في عرض العناصر وتحديد موضعها وتغيير حجمها ونموذج صندوقها. على سبيل المثال، باستخدام <code>flex</code>、<code>grid</code> لإنشاء حاويات تخطيط مرنة أو شبكية. استخدم <code>w-{size}</code> و <code>h-{size}</code> لتعيين العرض والارتفاع، حيث يمكن أن يكون الحجم رقمًا (مطابقًا لوحدة ريم) أو كسرًا أو نسبة مئوية. على سبيل المثال <code>w-64</code> يشير إلى عرض 16 ريم.<code>w-1/2</code> يشير إلى عرض 50%.

بالنسبة للنموذج المربع، تستخدم الهوامش الداخلية <code>p-{size}</code>(الحشو) والهوامش الخارجية باستخدام <code>m-{size}</code>(الهامش). على سبيل المثال <code>p-4</code> تشير إلى أن الهوامش الداخلية هي 1 مليمتر في جميع الاتجاهات.<code>mt-2</code> يشير إلى هامش خارجي علوي 0.5 ريم.

تصميم متجاوب

نظام Tailwind الافتراضي المتجاوب في Tailwind هو نظام نقاط التوقف الافتراضية المتجاوبة هو نظام متحرك أولاً. تنطبق الفئات غير المثبتة على جميع الشاشات، بينما تنطبق الفئات المثبتة مسبقًا (مثل <code>sm:</code>、<code>md:</code>、<code>lg:</code>、<code>xl:</code>、<code>2xl:</code>) ثم يعمل على الشاشة عند نقطة التوقف تلك وما فوقها. على سبيل المثال، تنشئ الشيفرة التالية تخطيطًا مكدسًا على هاتف محمول وجنبًا إلى جنب على شاشة متوسطة.

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

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

الأسلوب والتفاعل

فئة الألوان بديهية للغاية ولها تنسيق <code>{property}-{color}-{shade}</code>. على سبيل المثال <code>bg-blue-500</code> يشير إلى أن لون الخلفية هو 500 درجة زرقاء.<code>text-gray-800</code> يشير إلى أن لون النص هو 800 درجة رمادية من الرمادي.تأتي Tailwind مع لوحة ألوان جيدة التصميم.

يمكن تعيين حالات مثل التحويم والتركيز وما إلى ذلك بواسطة بادئات مثل <code>hover:bg-blue-700</code> يشير إلى أن لون الخلفية يتغير إلى اللون الأزرق عند تمرير الفأرة 700 يتيح لك ذلك تحديد حالة التفاعل مباشرةً في HTML دون الحاجة إلى كتابة CSS إضافية.

الميزات المتقدمة والتخصيص

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

رمز التصميم المخصص (Custom Design Token)

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

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand': '#0ea5e9',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
}

يمكنك الآن استخدام <code>bg-brand</code> و <code>w-128</code> مثل هذه الفئات. يضمن هذا النهج أن تتلاءم تصميماتك المخصصة بسلاسة مع نظام Tailwind البيئي لفئات الأدوات المساعدة.

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

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

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

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-500 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;
  }
}

هنا،@apply “يطبق” التوجيه "مجموعة من أنماط الفئات المساعدة على .btn-primary الفصل. بعد ذلك، يمكنك ببساطة استخدام <code>class="btn-primary"</code>هذا يجمع بين مرونة الأساليب العملية وقابلية إعادة استخدام الفئات (classes) في CSS التقليدية.

استخدام النظام البيئي للمكونات الإضافية

يحتوي Tailwind على نظام بيئي غني بالمكونات الإضافية لإضافة فئات أو مكونات أو متغيرات جديدة. على سبيل المثال، فإن @tailwindcss/forms يوفر المكون الإضافي تصميماً افتراضياً أفضل لعناصر النموذج، و@tailwindcss/typography توفر الإضافة prose لتجميل محتوى Markdown أو محتوى HTML الذي ينشئه نظام إدارة المحتوى بسرعة. بعد تثبيته عبر npm، قم بإضافته إلى ملف التكوين في plugins فقط أدخلها في المصفوفة.

الملخصات

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

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

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

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

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

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

اعتمدها Tailwind @tailwind base يتم حقن مجموعة من أنماط “ما قبل الإضاءة” لإعادة ضبط اختلافات الأنماط الافتراضية بين المتصفحات. إذا كنت بحاجة لإضافة أو تجاوز بعض الأنماط الأساسية العامة فوق هذا، يمكنك القيام بذلك في ملف CSS الخاص بك عن طريق إضافة ما يلي إلى @tailwind base بعد ذلك، وقبل الطبقات الأخرى، تتم كتابتها باستخدام CSS قياسي.

يمكنك أيضًا تمرير tailwind.config.js في هذا الملف، corePlugins لتعطيل حقن أنماط أساسية معينة تمامًا. بالنسبة لتجاوزات الأنماط على مستوى المكوّنات، فإن الطريقة الموصى بها هي استخدام مجموعة أكثر تحديدًا من فئات الأدوات المساعدة، أو استخدام @layer components إنشاء فئات مخصصة ذات أولوية أعلى.

ما هي إطارات عمل JavaScript التي يمكن استخدامها مع Tailwind CSS؟

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

تقدم العديد من مجتمعات الأطر أيضًا أدوات تكامل أعمق أو إعدادات مسبقة. على سبيل المثال، في React، يمكنك الجمع بين استخدام أدوات مثل clsx أو classnames مثل هذه المكتبات لدمج أسماء الفئات بشكل مشروط، مما يجعل التعامل مع الأنماط الديناميكية أكثر أناقة.

كيف يمكن ضمان توحيد استخدام أداة Tailwind CSS في مشاريع الفريق؟

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

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