ما هو Tailwind CSS؟
في كتابة CSS التقليدية، اعتدنا على إنشاء أسماء فئات دلالية لكل مكوّن في واجهة المستخدم، وكتابة قواعد الأنماط التفصيلية في أوراق الأنماط المنفصلة. على الرغم من أن هذه الطريقة ذات هيكل واضح، إلا أنها غالبًا ما تؤدي إلى تضخم أوراق الأنماط مع توسع حجم المشروع، كما تجعل أسماء الفئات صعبة الصيانة، وتتطلب التبديل المتكرر بين ملفات HTML و CSS. تقدم Tailwind CSS حلاً مختلفًا تمامًا - إطار CSS ذو الأولوية العملية والذرّية.
فكرتها الأساسية هي تقديم مجموعة من أدوات CSS ذات الوظيفة الواحدة والدقيقة، حيث يمكن للمطورين استخدامها بشكل مباشر على عناصر HTML. class تقوم بدمج هذه الفئات في الخصائص لإنشاء التصميم. على سبيل المثال، لإنشاء زر أزرق متمركز، لم تعد بحاجة إلى كتابة شيء يسمى .btn-primary لا تستخدم قواعد CSS، بل اكتبها مباشرةً في HTML. class="px-4 py-2 bg-blue-500 text-white rounded text-center"يؤدي هذا الأسلوب إلى تسريع عملية إنشاء واجهة المستخدم بشكل كبير، مما يؤدي إلى ربط الأنماط بالبنية بشكل وثيق، ويساعد على تجنب تعارض الأنماط على مستوى العالم بشكل فعال.
يعد Tailwind CSS إطارًا أماميًا قابلاً للتخصيص إلى حد كبير، ويشتمل على نظام تصميم متكامل، حيث يتم إنشاء خصائص مثل المسافات والألوان وحجم الخط استنادًا إلى ملف موضوع قابل للتخصيص، مما يضمن اتساق التصميم. ومن خلال استخدام إصداره الرسمي، @tailwindcss مكون PostCSS، الذي يحلل ملفات مشروعك بذكاء في مرحلة البناء، ويقوم بتعبئة فئات الأدوات المستخدمة فقط في ملف CSS النهائي، مما ينتج ملفات أسلوب مصغرة إلى أقصى حد ممكن.
القراءة الموصى بها اكتساب المهارات الأساسية في Tailwind CSS: دليل تطوير واجهة المستخدم الحديثة من المستوى المبتدئ إلى المستوى المتقدم.。
كيف يتم تكوين البيئة وتهيئة المشروع؟
لبدء استخدام Tailwind CSS، يجب أولاً دمجها في مشروعك للواجهة الأمامية. حاليًا، الطريقة الأكثر شيوعًا للدمج هي من خلال Node.js و PostCSS. ستقوم الخطوات التالية بإرشادك في إنشاء مشروع أساسي.
تثبيت الاعتماديات من خلال مدير الحزم.
أولاً، قم بتهيئة مشروع Node.js في الدليل الجذري للمشروع (إذا لم يكن قد تم تهيئته بالفعل)، ثم قم بتثبيت الاعتمادات الضرورية باستخدام npm أو yarn. ستحتاج إلى تثبيت: tailwindcss أنا بنفسي،postcss أيضاً autoprefixer（تُستخدم لإضافة بادئات موفري المتصفحات تلقائيًا). يمكن تثبيتها باستخدام الأمر التالي:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -pnpx tailwindcss init -p سيؤدي الأمر إلى إنشاء ملفين تكوينيين رئيسيين:tailwind.config.js و postcss.config.jsمن بينها،tailwind.config.js إنها ملف التكوين الرئيسي الخاص بك لتخصيص مظهر Tailwind والمكونات الإضافية ومصادر المحتوى.
مسار ملفات قوالب التهيئة.
لكي يتمكن Tailwind من إجراء “تحسين هز الأشجار” (Tree Shaking) بشكل صحيح، أي تعبئة الأنماط المستخدمة فقط، تحتاج إلى القيام بذلك في tailwind.config.js مستندات content يحدد المصفوفة مسارات ملفات القالب التي تحتوي على أسماء فئات Tailwind. هذه خطوة مهمة، حيث قد لا تظهر أي أنماط في بيئة الإنتاج دون ذلك.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js,jsx,ts,tsx,vue}"], // 根据你的项目结构调整
theme: {
extend: {},
},
plugins: [],
}إدخال تعليمات الأسلوب الأساسية.
بعد ذلك، في ملف CSS الرئيسي الخاص بك (على سبيل المثال، Next, in your main CSS file (for example, ./src/styles.css أو ./src/index.cssأضف التعليمات الثلاث الأساسية لـ Tailwind في الجزء العلوي من ملف styles.css.
القراءة الموصى بها تحليل متعمق لـ Tailwind CSS: إطار CSS العملي لتطوير الواجهة الأمامية الحديثة.。
/* ./src/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;@tailwind base تم إدراج أنماط ما قبل التحقق من Tailwind (استنادًا إلى modern-normalize) وبعض أنماط الطبقات الأساسية.@tailwind components سيتم حقن فئات المكونات التي سجلتها في التكوين، أو بعض فئات المكونات الرسمية، مثل container。@tailwind utilities ثم يتم إدراج جميع فئات الأدوات المساعدة، وهي مصدر الأنماط الرئيسي.
أخيرًا، قم بإدراج ملف CSS هذا في ملف الدخول لمشروعك، وتأكد من أن عملية بناءك (مثل استخدام Vite أو Webpack أو ما شابه ذلك) قد تم تكوينها لتقوم PostCSS بمعالجته. بعد ذلك، يمكنك استخدام الأدوات المقدمة من Tailwind في مشروعك.
تفاصيل الأدوات الأساسية والحالات العملية.
يوفر Tailwind CSS فئات أدوات تغطي تقريبًا جميع خصائص CSS. فهم قواعد التسمية هو مفتاح الاستخدام الفعال. تتبع التسميات عادةً نمط “الخاصية-القيمة” أو “الخاصية-الاتجاه-القيمة” وتستخدم اختصارات ذات مغزى.
تحكم في التخطيط والمسافات بين الأحرف.
بالنسبة للتخطيط، تشمل فئات الأدوات الأكثر شيوعًا تلك التي تتحكم في أنواع العرض. flex, hidden, block, inline-block إلخ. بالنسبة لتخطيطات Flexbox و Grid، يوفر Tailwind سلسلة أدوات كاملة، مثل: justify-center, items-center, grid-cols-3 إلخ.
يعد التحكم في المسافات عنصرًا أساسيًا في نظام التصميم Tailwind. يستخدم نظام التصميم هذا نسبة موحدة للتكبير (بمعدل 0.25rem بشكل افتراضي، أي 4px). على سبيل المثال:
- m-4 أظهر margin: 1rem;
- p-2 أظهر padding: 0.5rem;
- mx-auto يشير إلى أن هامش الجانب الأفقي هو "auto"، ويُستخدم عادةً لمحاذاة العناصر على مستوى الكتلة في الوسط.
- space-x-4 يُستخدم لإضافة مسافة عمودية بين العناصر الفرعية لحاوية Flex أو Grid.
تعديل الألوان والأنماط.
يمتلك Tailwind لوحة ألوان غنية وقابلة للتوسيع. وعادةً ما تتكون أسماء فئات الألوان من اسم اللون ودرجة سطوعه، على سبيل المثال: bg-blue-500（اللون الخلفي），text-gray-800（لون النص），border-red-300（لون الإطار）。
القراءة الموصى بها بناء مواقع ويب حديثة ومتجاوبة باستخدام Tailwind CSS: دليل تعليمي من البداية إلى النهاية.。
بالنسبة للتعديلات على الأسلوب، يمكنك بسهولة دمج أسماء الفئات لتحقيق تأثيرات معقدة:
<!-- 一个渐变背景的圆角按钮 -->
<button class="px-6 py-3 rounded-lg bg-gradient-to-r from-purple-500 to-pink-500 text-white font-semibold shadow-lg hover:shadow-xl transition-shadow duration-300">
点击我
</button>في الشفرة المذكورة أعلاه،bg-gradient-to-r تم إنشاء تدرج خطي من اليسار إلى اليمين.shadow-lg و hover:shadow-xl تمت إضافة ظل للحالتين الافتراضية والمعلقة.transition-shadow duration-300 وبذلك، تمت إضافة رسوم متحركة انتقالية سلسة للتغييرات في الظل.
التصميم التفاعلي والحالات المتغيرة.
يستخدم تصميم Tailwind التفاعلي استراتيجية “الأجهزة المحمولة أولاً”. تعمل الأدوات الافتراضية على جميع أحجام الشاشات، بينما تعمل الفئات المضافة إليها بادئات (مثل <) على أجهزة محددة. md:, lg:يعمل هذا الخيار على الشاشات المحددة وأعلىها.
<!-- 在小屏幕上堆叠，在中屏幕上横向排列 -->
<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>بالإضافة إلى البادئات التفاعلية، تدعم Tailwind أيضًا البادئات المتغيرة حسب الحالة، مثل: hover:, focus:, active:, disabled:وهذا يجعل إضافة الأسلوب إلى حالات التفاعل أمرًا بسيطًا للغاية.
<input class="border border-gray-300 rounded p-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" />عندما يحظى مربع الإدخال هذا بتركيز الانتباه، يظهر عليه تأثير الهالة الزرقاء، ويتم تحقيق ذلك من خلال focus:ring-* تم تنفيذ ذلك بواسطة الفئة.
تقنيات متقدمة وأفضل الممارسات.
عندما يصبح المشروع معقدًا، يمكن اتباع بعض أفضل الممارسات للحفاظ على قابلية صيانة الشفرة وأدائها العالي.
استخراج المكونات واستخدام الأمر @apply.
على الرغم من أنه من المريح جمع الأدوات مباشرةً في HTML، إلا أنه إذا تكرر مجموعة الأساليب المعقدة في عدة مواقع، فيجب التفكير في استخراجها كعناصر. في CSS التقليدي، تقوم بإنشاء فئة جديدة. في Tailwind، لديك خياران:
1. استخدام مكونات جافا سكريبت: في أطر عمل مثل React و Vue، تتمثل أفضل الممارسات في إنشاء ملف JavaScript/مكون قابل لإعادة الاستخدام، يقوم بتغليف فئات الأنماط المتكررة.
2. استخدم. @apply التعليمات: في أي ملف CSS لديك، يمكنك استخدام Instructions: In your CSS file, you can use @apply قم باستخراج مجموعة كاملة من الأدوات إلى فئة مخصصة جديدة.
/* 在 styles.css 中 */
.btn-primary {
@apply px-6 py-3 bg-blue-600 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-200 ease-in-out;
}بعد ذلك، يمكنك استخدام ذلك في HTML. class="btn-primary"يجب أن تضع في اعتبارك أنّ الإفراط في استخدام @apply سيؤدي ذلك إلى العودة إلى كتابة CSS التقليدية، ويجب استخدامه بحذر في أنماط الأساليب التي يتم إعادة استخدامها بشكل كبير حقًا.
نظام تصميم مخصص متعمق.
إن قوة Tailwind تكمن في قابليته للتخصيص. يمكنك القيام بذلك في tailwind.config.js مستندات theme.extend يقوم بعض الإضافات بتوسيع المظهر الافتراضي، أو في حالة theme يتم تغطية بعض الأجزاء مباشرةً.
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'brand-blue': '#1992d4',
},
spacing: {
'128': '32rem',
}
},
// 或者直接覆盖默认断点
// screens: {
// 'tablet': '640px',
// 'laptop': '1024px',
// 'desktop': '1280px',
// },
},
}بهذه الطريقة، يمكنك استخدام bg-brand-blue أو w-128 مثل هذه الفئات المخصصة.
تحسين بناء بيئة الإنتاج.
تأكد من أنك content تشمل التهيئة الصحيحة جميع الملفات التي يتم إنشاؤها ديناميكيًا والتي تحتوي على أسماء للفئات (مثل ملفات JavaScript/TypeScript). عند تشغيل الأمر لبناء الإنتاج (على سبيل المثال، npm run buildبعد ذلك، سيقوم Tailwind بتشغيل PurgeCSS (الذي تم دمجه الآن في المحرك) لإزالة جميع الأنماط غير المستخدمة. من أجل الحصول على أصغر حجم ملف ممكن، يجب تجنب إنشاء أسماء الفئات الكاملة ديناميكيًا في دمج السلاسل، حيث قد يؤدي ذلك إلى عدم تمكن الأداة من تحليلها بشكل استاتيكي.
الملخصات
تغير Tailwind CSS بشكل جذري من عملية إنشاء واجهات المستخدم للمطورين من خلال فلسفة التصميم الذري التي تركز على الاستخدام العملي لديه. يعمل على دمج الأنماط مع هيكل HTML بشكل وثيق من خلال توفير العديد من فئات الأدوات ذات الدقة العالية، مما يؤدي إلى زيادة كبيرة في كفاءة التطوير والاتساق في التصميم. بدءًا من تكوين البيئة، والإتقان في استخدام فئات الأدوات الأساسية، إلى تطبيق التصميم المستجيب والحالات المتغيرة، وصولاً إلى إدارة المشاريع المعقدة من خلال استخراج المكونات والتخصيص العميق، تقدم Tailwind CSS حلاً قويًا ومرنًا لتطوير الويب الحديث. إن إتقانها لا يعني فقط تعلم مجموعة جديدة من أدوات CSS، بل يعني أيضًا تبني نموذج أكثر كفاءة وقابلية للصيانة لتطوير واجهة المستخدم.
الأسئلة الشائعة الأسئلة المتداولة
هل ستكون ملفات CSS التي يتم إنشاؤها بواسطة Tailwind CSS كبيرة الحجم؟
لا. هذه بالضبط إحدى المزايا الأساسية لـ Tailwind CSS. في وضع التطوير، يكون حجم ملفات CSS كبيرًا حقًا (عادةً ما يزيد عن عدة ميغابايت) لتوفير جميع فئات الأدوات الممكنة. ومع ذلك، في مرحلة البناء الإنتاجية، يقوم بتحليل ملفات مشروعك (content يمكنك استخدام ملف “config.js” (الملف المحدد في التكوين) لـ "هز الشجرة" بشكل دقيق، والاحتفاظ فقط بفئات الأدوات التي تستخدمها فعليًا. عادةً ما يكون ملف CSS الناتج بضعة كيلوبايت إلى عشرات من الكيلوبايت، مما يجعله أصغر حجمًا من العديد من ملفات CSS المكتوبة يدويًا أو الإطارات التقليدية.
في إطار المشاريع الجماعية، كيف يمكن الحفاظ على اتساق وقابلية قراءة شفرة Tailwind؟
إن الأمر الأساسي للحفاظ على تناسق الشفرة هو الاستفادة الكاملة من ملف تهيئة Tailwind. tailwind.config.jsيجب أن يوحد الفريق رموز التصميم الخاصة بالمشروع وفقًا لهذا التعريف، مثل ألوان العلامة التجارية والخطوط ونسب المسافات ونقاط التقسيم. بالنسبة لمجموعات الأنماط المعقدة المتكررة، يُنصح بشدة بتغليفها كمكونات في أطر الواجهة الأمامية (مثل React و Vue)، بدلاً من إساءة استخدام CSS. @apply تعليمات. في الوقت نفسه، يمكنك استخدام مكوّن Prettier الإضافي (مثل prettier-plugin-tailwindcssيتم ترتيب أسماء الفئات تلقائيًا، مما يحسن قابلية قراءة قائمة أسماء الفئات الطويلة بشكل كبير.
هل يدعم Tailwind CSS الوضع الداكن؟
دعم كامل. يحتوي Tailwind CSS على وظيفة للوضع المظلم. يمكنك العثور عليها في tailwind.config.js إنه متاح في جميع أنحاء الصين. darkMode: 'media' أو darkMode: 'class' لتفعيله. استخدم 'media' عندئذ، سيتم تبديل الوضع الداكن تلقائيًا حسب تفضيلات الألوان لنظام تشغيل المستخدم. استخدم 'class' عندما تقوم بذلك، تحتاج إلى وضع العنصر الجذري لـ HTML (مثل <) في الأعلى. <html>يمكنك إضافتها أو إزالتها يدويًا. class="dark" لتشغيل التبديل. بعد ذلك، يمكنك استخدام dark: تُستخدم البادئات المتغيرة لتحديد الأنماط في الوضع الداكن، على سبيل المثال: dark:bg-gray-900 dark:text-white。
كيف يمكنني تغطية أنماط مكونات مكتبة الطرف الثالث؟
عند استخدام مكتبات واجهة المستخدم الخاصة بطرف ثالث والتي تتضمن أنماطها الخاصة، قد لا تتمكن من تجاوزها باستخدام فئات الأدوات في Tailwind مباشرةً، نظراً لأن أنماطها قد تكون أكثر تحديداً. هناك عدة استراتيجيات يمكن استخدامها لحل هذه المشكلة: أولاً، حاول استخدام فئات Tailwind. !important مُعدّل، أضفه بعد فئة الأداة. !مثلاً، bg-red-500!سيؤدي ذلك إلى إضافة شيء ما إلى إعلان النمط هذا. !importantثانياً، إذا كان ذلك ممكناً، قم بتهيئة CSS للمكتبات الخارجية بحيث يتم تحميلها قبل CSS التي يتم إنشاؤها بواسطة Tailwind، بحيث تكون لأسلوب Tailwind أولوية أعلى. وأخيراً، كحل أقصى، لا يزال بإمكانك كتابة جزء صغير من CSS التقليدي، مستفيداً من تحديد أعلى للمحددات لتجاوز ذلك.
ما التالي، ما التالي؟
القراءة الموسعة والمعرفة العملية
فيما يلي بعض الموضوعات ذات الصلة بموضوع هذه المقالة وهي مناسبة لمزيد من القراءة المتعمقة. وغالباً ما يكون من الأفضل إعطاء الأولوية للبدء بالمقال الأقرب إلى مشكلتك الحالية ثم التوسع تدريجياً إلى المواضيع المحيطة.
- بناء المواقع الإلكترونية: دليل تقني شامل لإنشاء مواقع مهنية من الصفر
- دليل شامل لعملية بناء المواقع الإلكترونية: تحليل خطوات كاملة من الصفر إلى الإطلاق المهني
- إتقان أساسيات Tailwind CSS: دليل تطوير الواجهات الأمامية الحديثة من الفئات العملية إلى التصميم التفاعلي
- دليل تقني وأفضل الممارسات لإتقان كامل عملية بناء المواقع الإلكترونية: من الصفر حتى النشر الفعلي
- بناء موقع إلكتروني ناجح: دليل شامل لبناء المواقع من الصفر إلى النهاية
العربية