ما هو Tailwind CSS؟
Tailwind CSS هو إطار عمل CSS عملي يركز على الوظائف والقابلية العملية. على عكس إطارات العمل التقليدية مثل Bootstrap وBulma التي توفر مكونات واجهة مستخدم جاهزة مثل الأزرار والبطاقات، فإن Tailwind لا يوفر هذه المكونات الكاملة. بدلاً من ذلك، يقدم مجموعة واسعة من الكلاسات الصغيرة ذات الاستخدامات المحددة. text-center、p-4、bg-blue-500يقوم المطورون بدمج هذه الفئات الأدواتية (tools classes) داخل HTML، تمامًا مثل استخدام أكواد ليغو (Lego blocks)، لبناء واجهات مستخدم مخصصة بسرعة. الفكرة الأساسية وراء هذه الطريقة هي إعادة سلطة التحكم في التصميم إلى المطورين، مما يتجنب الحاجة إلى كتابة كميات كبيرة من الكود CSS الإضافي لتغيير أسلوب العرض الافتراضي للإطار (framework).
فلسفة التصميم الأساسية
جوهر هذه الفلسفة التصميمية هو “التجزئة إلى وحدات أساسية” (Atomic Design). كل فئة أدوات مسؤولة فقط عن إعلان أسلوب محدد جدًا. على سبيل المثال،mt-2 يمثل فقط… margin-top: 0.5rem，text-2xl يمثل فقط… font-size: 1.5remمن خلال دمج هذه الفئات الأساسية، يمكن بناء أي مكونات معقدة. هذه الطريقة تعزز كفاءة التطوير بشكل كبير، لأنك لم تعد بحاجة إلى التنقل المتكرر بين ملفات HTML وملفات CSS، ولا تحتاج أيضًا إلى القلق بشأن كيفية تعريف أسماء الفئات. في الوقت نفسه، تضمن هذه الطريقة تناسق التصميم من خلال تطبيق قيم محددة مسبقًا للمسافات والألوان وأحجام الخطوط ضمن نظام التصميم.
مقارنة مع أطر المكونات
مقارنةً بمكتبات التطوير مثل Bootstrap، فإن ملفات CSS الناتجة من Tailwind CSS عادةً ما تكون أصغر حجمًا، لأنها تحتوي فقط على الأنماط التي تستخدمها بالفعل. وذلك بفضل ميزة PurgeCSS القوية (التي تُسمى “Purge” في إصدارات Tailwind CSS 2 وما بعدها). أثناء إنشاء النسخة النهائية من المشروع، يقوم Tailwind تلقائيًا بمسح ملفات المشروع لتحديد جميع الفئات (classes) التي يتم استخدامها، ثم يقوم بحذف الفئات غير المستخدمة، مما ينتج عنه ملف CSS مضغوط ومحسن للغاية. وهذا يحل بشكل فعال مشكلة الحجم الكبير لملفات CSS الناتجة عن المكتبات التقليدية بعد عملية التعبئة (packing).
القراءة الموصى بها Tailwind CSS: من المبتدئين إلى الخبراء، في بناء صفحات ويب حديثة ومتجاوبة。
كيفية البدء في استخدام Tailwind CSS؟
بدء استخدام Tailwind CSS أمر سهل للغاية، ويوصي المطورون الرسميون باستخدام أداة سطر الأوامر الخاصة به. tailwindcss قم بالتثبيت والتكوين. فيما يلي أكثر الإجراءات شيوعًا للتثبيت المتكاملة مع مجموعات أدوات بناء الواجهات الأمامية الحديثة.
تثبيته عبر npm أو yarn.
أولاً، قم بتثبيت مكتبة Tailwind CSS كاعتماد تطويري (development dependency) باستخدام أداة npm أو yarn. بالإضافة إلى ذلك، عادةً ما تحتاج أيضًا إلى مكتبتي PostCSS و Autoprefixer لمعالجة تحويلات ملفات CSS وإضافة الرموز الخاصة بمتصفحات الويب. يمكنك استخدام الأوامر التالية للتثبيت:
npm install -D tailwindcss postcss autoprefixer
# 或
yarn add -D tailwindcss postcss autoprefixerبعد الانتهاء من التثبيت، قم بتشغيل الأمر الخاص بالتهيئة لإنشاء ملفين تكوينيين مهمين:tailwind.config.js و postcss.config.js。
npx tailwindcss init -pتكوين ملفات الإعدادات لـ Tailwind
tailwind.config.js هذا هو ملف الإعدادات الأساسي لـ Tailwind CSS، حيث يمكنك تخصيص نظام التصميم الخاص بك، مثل ألوان الثيمات، الخطوط، نسب المسافات، نقاط الاستئناف (breakpoints)، وغيرها.
// tailwind.config.js 示例
module.exports = {
content: ["./src/**/*.{html,js,jsx,ts,tsx,vue}"], // 配置 Purge 扫描的路径
theme: {
extend: {
colors: {
'brand-blue': '#1992d4',
},
},
},
plugins: [],
}إدخال Tailwind في CSS.
在你的主 CSS 文件（通常是 src/index.css أو src/styles.cssفي النص المقدم، يتم التعبير عن عملية ما من خلال استخدام عبارة “من خلال”. @tailwind تقوم هذه الأوامر بإدخال الطبقة الأساسية من مكتبة Tailwind CSS إلى المشروع.
القراءة الموصى بها دليل نهائي لـ Tailwind CSS: دورة عملية للتعلم من الصفر إلى الإتقان。
/* src/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;أخيرًا، قم بإدخال ملف CSS هذا إلى مشروعك، ثم بدأ في استخدام الفئات (classes) المتاحة فيه داخل كود HTML أو JSX الخاص بك. قم بتنفيذ أمر البناء (build command) لتطبيق التغييرات. npm run buildبعد ذلك، سيقوم Tailwind بمعالجة هذه التعليمات وإنشاء ملفات الأنماط النهائية.
الميزات الأساسية والحيل العملية
إتقان الميزات الأساسية والحيل العملية لـ Tailwind CSS هو مفتاح تحسين كفاءة عملية التطوير. فيما يلي بعض الميزات الأكثر أهمية وطرق الاستخدام المتقدمة لهذه الأداة.
تصميم متجاوب
تتبنى Tailwind استراتيجية تصميم متجاوبة تركز على الأجهزة المحمولة أولاً؛ حيث تعمل الفئات الأساسية (الـ “utility classes”) بشكل افتراضي على جميع أحجام الشاشات. لتطبيق أنماط معينة على نقاط محددة من أحجام الشاشة، ما عليك سوى إضاف md:text-center、lg:flexالإطار مدمج بهذه الميزة مسبقًا. sm、md、lg、xl、2xl خمس نقاط توقف (breakpoints)، يمكنك استخدامها… tailwind.config.js أنا أحبك، أيها الأخ الأكبر. theme.screens تم إجراء تعديلات جزئية على المحتوى.
<!-- 在移动端纵向排列，在中等屏幕及以上横向排列 -->
<div class="flex flex-col md:flex-row">
<div class="p-4">العنصر 1</div>
<div class="p-4">العنصر 2</div>
</div>حالات التمرير فوق العنصر (Hover) وحالة التركيز (Focus)
من خلال استخدام الرموز المسبقة (البادئات)، يمكن بسهولة إضافة أنماط مختلفة للعناصر حسب الحالة التي تكون فيها، مثل حالة التمرير فوقها (الهوفينج)، أو حالة التركيز (الفوكوس)، أو حالة التنشي
<button class="bg-blue-500 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300 text-white py-2 px-4 rounded">
点击我
</button>استخراج المكونات واستخدام أمر `@apply`
على الرغم من أن استخدام الأدوات مباشرةً في HTML أمر مريح، إلا أنه عندما يتم استخدام مجموعات من الأنماط المعقدة بشكل متكرر، يصبح الكود مملًا ومطولًا. في مثل هذه الحالات، يمكن استخدام… @apply في CSS، تم استخراج فئات الأدوات (tools classes) وتحويلها إلى فئات مكونات جديدة (component classes).
/* 在 CSS 文件中 */
.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;
}<!-- 在 HTML 中 -->
<button class="btn-primary">按钮</button>التكوينات المخصصة والإضافات (Custom Configurations and Plugins)
إن قابلية تخصيص Tailwind للارتفاعات (heights) هي أحد نقاط قوته الرئيسية. يمكنك… tailwind.config.js يمكنك توسيع أو تغيير الموضوع الافتراضي الخاص بالتطبيق. على سبيل المثال، يمكنك إضافة ألوان مخصصة أو قيم مسافات، أو تسجيل إضافات من جهات خارجية أو إضافات مصممة خصيصًا لإضافة ميزات جديدة إلى
القراءة الموصى بها دليل نهائي لـ Tailwind CSS: من المبادئ الأساسية إلى الإتقان، إطار عمل CSS الذري العملي。
التطبيق في الإطارات الرئيسية (Mainstream Frameworks)
يمكن دمج Tailwind CSS بسلاسة مع معظم أطر ومكتبات الواجهات الأمامية الحديثة، مثل React وVue وAngular وغيرها.
استخدامه في مشاريع React
في React، كل ما عليك فعله هو اتباع الخطوات المذكورة أعلاه لتثبيت وتكوين Tailwind، ثم دمجها مع عملية بناء مشروعك (مثل Create React App، Next.js، Vite). بعد ذلك، سيكون بإمكانك استخدام أسماء الفئات (classes) الخاصة بـ Tailwind مباشرةً داخل كود JSX الخاص بك.
// React 组件示例
function Card({ title, content }) {
return (
<div classname="max-w-sm rounded overflow-hidden shadow-lg bg-white p-6">
<h2 classname="font-bold text-xl mb-2">{title}</h2>
<p classname="text-gray-700 text-base">\n{content}</p>
</div>
);
}استخدامه في مشاريع Vue.js
في مشاريع Vue.js، عملية الدمج مباشرة أيضًا. إذا كنت تستخدم Vue CLI، فيمكنك إكمال الإعدادات تلقائيًا عن طريق إضافات Vue CLI. بالنسبة للمكونات ذات الملف الواحد (.vue)، <template> جزء منه، يتم استخدامه. class أداة لإضافة الخصائص (Properties Addition Tool).
<template>
<button class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600">
{{ buttonText }}
</button>
</template>التطبيق في مشاريع Next.js
توفر وثائق Next.js الرسمية دليلاً مفصلاً حول كيفية دمج أنماط Tailwind CSS. نظرًا لأن Next.js يدعم PostCSS مباشرةً، فإن عملية الدمج سهلة للغاية. كل ما عليك فعله هو تثبيت Tailwind والمكتبات المعتمدة عليها، ثم إنشاء ملف تكوين، وأخيرًا استيراد أنماط Tailwind في ملفات الأنماط العامة (global style files) الخاصة بموقعك. @tailwind مجرد تنفيذ الأوامر.
الملخصات
لقد غيرت لغة Tailwind CSS طريقة كتابة الكود الخاص بالتصميم الجرافيكي (CSS) بشكل جذري، من خلال نهجها الفريد الذي يعطي الأولوية للوظائف (functionality) واستخدام أسماء الفئات (class names) المعيارية والقابلة لإعادة الاستخدام. فهي تسمح بدمج الأنماط مباشرة داخل علامات HTML، مما يزيد بشكل كبير من كفاءة ومرونة عملية تطوير واجهات المستخدم (UI). تتميز Tailwind CSS بدعمها القوي للتصميم المتجاوب (responsive design)، وإمكانية تخصيص الحالات المختلفة (state variations)، وإعداداتها القابلة للتعديل بشكل كبير، بالإضافة إلى خيارات تحسين الأداء الخاصة بعملية إنتاج الكود (Purge)، مما يجعلها الخيار المثالي للمشاريع الشخصية وكذلك التطبيقات على مستوى الشركات الكبيرة. قد يتطلب الأمر بعض الوقت للتعود على أسماء الفئات في البداية، لكن الفوائد طويلة الأمد الناتجة عن قواعد التسمية الموحدة وقيود التصميم – والتي تشمل سرعة أعلى في التطوير، وحجم كود CSS أصغر، وتناسقًا أفضل في التصميم – لا مثيل لها. سواء كنت مبتدئًا في مجال التطوير الأمامي أو مطورًا ذو خبرة، فإن إتقان لغة Tailwind CSS سيمثل إضافة قيمة كبيرة إلى مهاراتك.
الأسئلة الشائعة الأسئلة المتداولة
تولد أداة Tailwind CSS العديد من أسماء الفئات (classes)، فهل قد يؤثر ذلك على أداء الصفحة؟
لا. هذا بالضبط ما يجعل تصميم Tailwind CSS رائعًا. على الرغم من أن ملفات HTML تحتوي على العديد من أسماء الفئات أثناء عملية التطوير، إلا أن هذا لا يؤثر سلبًا على أداء التطبيق أثناء التشغيل؛ فمحركات تصيير المتصفحات تعالج أسماء الفئات بسرعة كبيرة. الأهم من ذلك، أنه في مرحلة بناء المنتج النهائي، يتم إزالة جميع قواعد CSS غير المستخدمة باستخدام خاصية “Purge”， مما يجعل ملف CSS الناتج أصغر حجمًا مقارنة بطرق تصميم CSS الأخرى (مثل BEM) أو الإطارات الUI التقليدية (مثل Bootstrap)، وبالتالي يتم تحسين أداء التحميل.
كيف يمكن إضافة ألوان مخصصة أو مسافات إلى Tailwind CSS؟
You need to modify the files in the root directory of the project. tailwind.config.js ملف الإعدادات. theme.extend أضف قيمك المخصصة تحت هذا الكائن، وبذلك يمكنك الاحتفاظ بالقيم الافتراضية الخاصة بـ Tailwind وتوسيعها عليها.
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'custom-gray': '#f0f0f0',
'brand-primary': '#ff6b35',
},
spacing: {
'72': '18rem',
'84': '21rem',
'128': '32rem',
}
},
}
}هل يمكن أن تؤدي أسماء الفئات (classes) الطويلة في Tailwind إلى تقليل قابلية قراءة الكود؟
يعتمد الأمر على عادات الفرد وطريقة تنظيم المشروع. بالنسبة للمكونات البسيطة، فإن دمج أسماء الفئات مباشرةً داخل HTML أمر سهل وواضح للغاية. أما بالنسبة للمكونات المعقدة التي تُستخدم مرارًا وتكرار @apply التعليمات تقوم بإخراج الأدوات من الكود الأساسي ووضعها داخل ملفات CSS، ثم تغليفها في صورة فئات مكونات ذات معنى واضح (semantic component classes). .btn-primaryبالإضافة إلى ذلك، يمكن الحفاظ على قابلية قراءة الكود وسهولة صيانته عن طريق تقسيم كود JSX/HTML حسب المناطق الوظيفية، واستخدام أسماء الفئات المنسقة عبر عدة أسطر، مع إضافة تعليقات مناسبة.
هل يمكن إدخال Tailwind CSS إلى مشروع قائم يستخدم بالفعل CSS التقليدي؟
ممكن، ولكن يجب التخطيط بعناية. يمكن لـ Tailwind CSS أن يتعايش مع أطر CSS أخرى أو مع CSS مخصص. يُنصح باستخدام استراتيجية هجرة تدريجية؛ يمكنك أولاً استخدام Tailwind في الصفحات أو المكونات الجديدة التي تقوم بتطويرها، واستخدام أداة PostCSS لمعالجة جميع ملفات CSS. تذكر أنه لتجنب تعارضات الأنماط، يجب التأكد من أن الأنماط الأساسية لـ Tailwind…@tailwind baseلن يتم تدمير الأنماط الحالية؛ أحيانًا قد يكون من الضروري تعطيل بعض الأنماط الأساسية عن طريق التكوين. أفضل طريقة هي البدء بتجربة ذلك على صفحة مستقلة وغير حيوية، وتراكم الخبرة تدر
ما التالي، ما التالي؟
القراءة الموسعة والمعرفة العملية
فيما يلي بعض الموضوعات ذات الصلة بموضوع هذه المقالة وهي مناسبة لمزيد من القراءة المتعمقة. وغالباً ما يكون من الأفضل إعطاء الأولوية للبدء بالمقال الأقرب إلى مشكلتك الحالية ثم التوسع تدريجياً إلى المواضيع المحيطة.
- دليل تقني وأفضل الممارسات لإتقان كامل عملية بناء المواقع الإلكترونية: من الصفر حتى النشر الفعلي
- بناء موقع إلكتروني ناجح: دليل شامل لبناء المواقع من الصفر إلى النهاية
- دليل شامل لبناء المواقع الإلكترونية الحديثة: اختيار التقنيات وأفضل الممارسات من الصفر حتى الإطلاق
- دليل شامل لتعلم CSS من Tailwind: بناء مواقع ويب حديثة ومتجاوبة من الصفر
- دليل بناء مواقع الويب الحديثة: العملية الكاملة من البداية حتى الإطلاق، بالإضافة إلى اختيار مكدس التقنيات المناسب
العربية