ما هو Tailwind CSS؟
في مجال تطوير الواجهات الأمامية اليوم، أصبح السعي وراء حلول أنيقة وفعالة وسهلة الصيانة أمرًا شائعًا للغاية. وقد ظهر إطار عمل Tailwind CSS في هذا السياق كإطار عمل لغة CSS يولي الأولوية للعملية العملية وسهولة الاستخدام. على عكس الإطارات التقليدية مثل Bootstrap التي توفر مجموعات من المكونات المعدة مسبقًا، يقدم Tailwind CSS مجموعة من الفئات العملية (Utility Classes) ذات المستوى المنخفض، مما يسمح للمطورين ببناء أي تصميم عن طريق دمج هذه الفئات مباشرة على عناصر HTML.
الفلسفة الأساسية لهذا الإطار هي “الوظيفة أولاً” (Utility-First). وهذا يعني أنك لست بحاجة إلى كتابة العديد من أسماء الفئات المخصصة وقواعد الأنماط في ملفات CSS، بل يمكنك استخدام الفئات المتاحة في الإطار والتي تحمل معاني واضحة لـ “تجميع” الأنماط. على سبيل المثال، إذا أردت إنشاء زر بمسافة داخلية، خلفية زرقاء، ونص أبيض، فكل ما عليك فعله هو كتابة الكود في HTML… <button class="px-4 py-2 bg-blue-500 text-white">按钮</button>هذه الطريقة ساعدت بشكل كبير في تسريع عملية تصميم النماذج الأولية وتطويرها، مع الحفاظ في الوقت نفسه على قابلية التنبؤ بالأنماط واتساقها.
كيفية البدء في استخدام Tailwind CSS؟
هناك طريقتان رئيسيتان لدمج أنماط Tailwind CSS في مشروعك: الاستفادة من خدمات CDN للحصول على تجربة سريعة، أو استخدام أدوات البناء مثل PostCSS لتطوير المشروع بشكل رسمي. بالنسبة للتعلم أو تصميم النماذج الأولية بسرعة، فإن طريقة استخدام CDN تعتبر الأكثر سهولة.
القراءة الموصى بها تعلم CSS باستخدام Tailwind من الأساسيات إلى الاحتراف: دليل عملي لبناء مواقع ويب استجابية حديثة。
يتم إدخال المحتوى بسرعة عبر خدمة CDN (Content Delivery Network).
أسهل طريقة هي القيام بذلك مباشرةً داخل ملف HTML. <head> بعض النسخ من سكريبتات Play CDN التي تضيف أسلوب تصميم Tailwind CSS. هذه السكريبتات مناسبة للعروض التوضيحية، النماذج الأولية، أو الصفحات الثابتة البسيطة.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-3xl font-bold text-center text-gray-800 mt-8">
مرحبًا، Tailwind CSS!
</h1>
</body>
</html>يرجى ملاحظة أن خدمة Play CDN تُستخدم بشكل أساسي في بيئات التطوير، ولا يُنصح باستخدامها في بيئات الإنتاج الرسمية. بالنسبة للمشاريع الإنتاجية، يجب استخدام عمليات البناء الموضحة أدناه.
دمج المشروع باستخدام PostCSS
هذه هي الطريقة الموصى بها لاستخدامها في بيئة الإنتاج، ويمكن دمجها بسلاسة مع أدوات الواجهة الأمامية الحديثة مثل Vite وWebpack وNext.js. أولاً، قم بتهيئة المشروع باستخدام npm أو yarn وثم قم بتثبيت الاعتمادات اللازمة.
npm init -y
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss initسيقوم هذا الأمر بإنشاء… tailwind.config.js ملف الإعدادات. بعد ذلك، ستحتاج إلى إنشاء ملف CSS (على سبيل المثال… src/input.css)، واستخدم @tailwind التعليمات المستخدمة لتضمين مختلف طبقات Tailwind…
/* src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;أخيرًا، قم بتكوين أداة البناء الخاصة بك (مثل Vite) لمعالجة ملفات PostCSS، أو استخدم أداة Tailwind CLI مباشرة لبناء الموقع ومراقبة أي تغييرات في ملفات CSS.npx tailwindcss -i ./src/input.css -o ./dist/output.css --watchبهذه الطريقة، يمكنك ربط المحتوى المولد في HTML. output.css بدأت في استخدام جميع أدوات الفئة (tools).
القراءة الموصى بها فهم عميق للأفكار الأساسية لإطار عمل CSS الحديث Tailwind CSS، الذي يولي الأولوية للتطبيق العملي.。
الفئات الأساسية والعملية والتصميم التكيفي (Core Practical Classes and Responsive Design)
مكتبة الكلاسات الأدواتية في Tailwind CSS هي الأساس الذي يقوم عليه العديد من ميزاتها القوية. أسماء هذه الكلاسات تتبع اتفاقية تسمية سهلة الفهم، مما يجعل تعلمها وحفظها أمرًا سهلًا للغاية.
المسافات، التنسيق، والألوان
استخدام فئات المسافات (Spacing Classes) p-{size}(المسافة الداخلية)m-{size}تنسيق (الهوامش الخارجية)، حيث {size} يمكن أن يكون القيمة رقمًا (مثل 0، 1، 2، 4، 8... والتي تتوافق مع قيم rem) أو "auto". على سبيل المثال،p-4 يشير إلى مسافة الهامش (padding) الداخلية التي تساوي 1 وحدة ريم (1rem).mt-2 يشير إلى هامش علوي بقيمة 0.5rem.
تشمل فئة التنسيقات أحجام الخطوط، سماكتها، وطريقة محاذاتها.text-{size} للتحكم في حجم الخط (مثلاً…) text-xl, text-2xl），font-{weight} تعديل سمك الخط (مثل…) font-normal, font-bold）。
نظام الألوان متنوع للغاية، ويمكن استخدامه بطرق مختلفة… bg-{color}-{shade}(لون الخلفية)text-{color}-{shade}(لون النص)border-{color}-{shade}(لون الإطار) وغيرها من الخصائص للاستخدام. على سبيل المثال،bg-blue-600 يُمثل خلفية زرقاء ذات درجة عمق متوسطة.
تحقيق تصميم واجهة متجاوب (Responsive Design)
تستخدم Tailwind نظام نقاط انقطاع (breakpoints) يعطي الأولوية للأجهزة المحمولة. تكون الأنماط الافتراضية مصممة للأجهزة المحمولة، ثم يتم إضافة أنماط إضافية للأجهزة ذات الشاشات الأكبر باستخدام بريديات نsm: (640 بكسل), md: (768 بكسل), lg: (1024 بكسل), xl: (1280 بكسل), 2xl: (1536 بكسل).
<div class="text-center md:text-left p-4">
<p class="text-lg sm:text-xl lg:text-2xl">يتم عرض هذا النص بشكل مركزي على الهواتف المحمولة، ويتم تحديد موقعه على اليسار في الأجهزة ذات الشاشات المتوسطة والأكبر حجمًا، كما أن حجم الخط يزداد مع زيادة حجم الشاشة.</p>
</div>من خلال دمج هذه البادئات، يمكنك بسهولة إنشاء واجهات ردية فعل معقدة تتكيف مع أحجام الشاشات المختلفة، دون الحاجة إلى كتابة كود طويل لاستعلامات الوسائط.
القراءة الموصى بها إتقان المفاهيم الأساسية لـ Tailwind CSS في مقال واحد: دليل من البداية إلى تطبيقات العمل العملية في تصميم الصفحات الويب。
الميزات المتقدمة والتكوينات القابلة للتخصيص
عندما لا تتمكن الأدوات الأساسية من تلبية متطلبات مشروعك، يوفر Tailwind CSS قدرات قوية على التوسعة والتخصيص.
استخراج المكونات واستخدام أمر @apply
على الرغم من أن الفئات العملية (practical classes) تحظى بالأولوية، إلا أن Tailwind تسمح باستخدام نفس الفئة مرارًا وتكرارًا في HTML لتجنب كتابة سلسلة طويلة من الكود المتشابه. @apply التعليمات في CSS تُستخدم لاستخراج فئات المكونات القابلة لإعادة الاستخدام.
/* 在你的 CSS 文件中 */
.btn-primary {
@apply px-4 py-2 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;
}بعد ذلك، يمكنك استخدامها في HTML. class="btn-primary"هذا الحل يحافظ على قيود التصميم العملية، وفي الوقت نفسه يزيد من قابلية إعادة استخدام الكود. طريقة أخرى أكثر توصية هي استخدام آليات المكونات (components) المتاحة في إطارات عمل JavaScript مثل React أو Vue لتغليف هذه الأنماط (styles).
ملفات الإعدادات المخصصة بعمق
tailwind.config.js الملف هو مركز التحكم الخاص بك؛ من خلاله، يمكنك تخصيص ألوان المواضيع، الخطوط، نقاط التوقف، نسب المسافات، وتقريبًا جميع عناصر التصميم الأخرى.
// tailwind.config.js
module.exports = {
content: ['./src/**/*.{html,js,ts,jsx,tsx}'], // 指定 Tailwind 要扫描的文件，以进行 Tree Shaking
theme: {
extend: {
colors: {
'brand-blue': '#1992d4',
},
spacing: {
'128': '32rem',
}
},
},
plugins: [],
}من خلال توسيع الموضوع، يمكنك إضافة الألوان الخاصة بالعلامة التجارية. bg-brand-blue أو المسافات المخصصة يدويًا. w-128في الوقت نفسه، يجب الحفاظ على التوافق مع النظام الافتراضي. بحلول عام 2026، مع تعمق متطلبات نظم التصميم والتعديدية (التقسيم إلى وحدات قابلة للتكوين)، ستصبح هذه القابلية للتكوين أكثر
الملخصات
لقد غيرت لغة Tailwind CSS طريقة عمل المطورين في كتابة أكواد CSS بشكل جذري، وذلك بفضل منهجيتها الفريدة التي تعطي الأولوية للعملية العملية والسهولة في الاستخدام. فهي توفر مجموعة من الكلاسات الصغيرة والقابلة للتكديس، مما يسمح بنقل عملية اتخاذ قرارات التصميم من ملفات الأنماط إلى لغة الترميز نفسها (HTML)، مما يؤدي إلى تحسين كبير في كفاءة العمل وتوحيد أسلوب التصميم. يمكن للمطورين البدء باستخدام Tailwind CSS بسهولة من خلال خدمات مثل CDN، ثم الاستفادة من أدوات مثل PostCSS لدمجها في المشاريع الرسمية، ومن ثم إتقان ميزات التصميم التكيفي والإعدادات المخصصة القوية. وعلى الرغم من أن هناك حاجة في البداية إلى حفظ أسماء بعض الكلاسات، إلا أن السرعة في الكتابة وسهولة الصيانة والمرونة التي توفرها Tailwind CSS تفوق بكثير طرق كتابة CSS التقليدية. بالنسبة للفرق والأفراد الذين يعملون على بناء صفحات ويب حديثة وتتكيف مع أجهزة المستخدمين المختلفة، فإن Tailwind CSS بلا شك أداة أساسية تستحق الدراسة العميقة والاستخدام الفعلي.
الأسئلة الشائعة الأسئلة المتداولة
هل ملفات CSS التي يتم إنشاؤها بواسطة Tailwind CSS ستكون كبيرة جدًا؟
لا، هذا بالضبط أحد المزايا الأساسية لـ Tailwind CSS. يتم تحقيق ذلك من خلال أداة PurgeCSS، والتي تم دمجها في إصدارات Tailwind v3 والإصدارات الأحدث. content مع وجود ميزة “Tree Shaking” في الإعدادات، سيقوم أداة البناء بمسح ملفات مشروعك (مثل HTML وJSX وVue) بشكل ذكي، وسيقوم فقط بتضمين الكلاسات التي تم استخدامها فعليًا في ملف CSS النهائي. نتيجة لذلك، يكون حجم ملف CSS في بيئة الإنتاج عادةً صغيرًا جدًا، وقد يتراوح بين بضعة كيلوبايتات وعدة عشرات من الكيلوبايتات.
كيف يمكن الحفاظ على توحيد كود الأنماط في مشاريع الفريق؟
من ناحيةه، يساهم مكتبة Tailwind CSS في تحقيق تناسق في التصميم إلى حد كبير من خلال توفير مجموعة محدودة ولكن مصممة بعناية من الكلاسات (classes). بالإضافة إلى ذلك، يمكنك تعزيز هذا التناسق من خلال مشاركة هذه الكلاسات داخل المشاريع واتباعها بدقة. tailwind.config.js يمكن استخدام ملفات الإعدادات لتوحيد تصميم الرموز (مثل الألوان، المسافات، الخطوط). كما يمكن للفريق أيضًا الاستفادة من إضافة Prettier لتحسين تنسيق الكود. prettier-plugin-tailwindcssيتم ترتيب أسماء الفئات تلقائيًا، مما يساعد على توحيد أسلوب الكود بشكل أكبر.
هل يمكن استخدام Tailwind CSS مع مكتبات CSS الحالية أو مكتبات مكونات واجهة المستخدم (UI) الموجودة؟
بالتأكيد يمكن ذلك. يمكن لـ Tailwind CSS أن يتعايش مع أنواع أخرى من CSS دون أن ينتج عن ذلك أي تعارضات. يمكنك تدريجياً استخدام Tailwind في بعض أجزاء المشروع مع الاحتفاظ بالكود CSS الأصلي. جميع الفئات (classes) المتاحة في Tailwind مُغلفة (wrapped) بأولويات منخفضة، مما يضمن أن يمكنك بسهولة تغطية أي أنماط مخصصة (custom styles) عليها. لكن، عادةً ما لا يُنصح باستخدام Tailwind مع مكتبة مكونات كاملة أخرى مثل Bootstrap، نظراً لاحتمال وجود تعارضات في مفاهيم التصميم أو أسس الأنماط بينهما.
كيف يمكن إضافة CSS مخصص إلى Tailwind أو تغيير الأنماط الافتراضية؟
هناك طريقتان رئيسيتان. أولاً، يمكنك… @tailwind في ملف CSS الخاص بالأوامر، قم بكتابة قواعد CSS الخاصة بك بعد كل أمر؛ حيث ستتمتع هذه القواعد بأولوية أعلى. وبالإضافة إلى ذلك، يُنصح بشكل أكبر باتباع هذه الطريقة… tailwind.config.js مستندات theme.extend يتم توسيع بعض الأجزاء، بدلاً من تغطيتها مباشرةً. theme في الأساس، هذا يضمن أنك لا تزال قادرًا على الوصول إلى جميع القيم الافتراضية، ويحافظ على سلاسة عملية الترقية.
ما التالي، ما التالي؟
القراءة الموسعة والمعرفة العملية
فيما يلي بعض الموضوعات ذات الصلة بموضوع هذه المقالة وهي مناسبة لمزيد من القراءة المتعمقة. وغالباً ما يكون من الأفضل إعطاء الأولوية للبدء بالمقال الأقرب إلى مشكلتك الحالية ثم التوسع تدريجياً إلى المواضيع المحيطة.
- بناء المواقع الإلكترونية: دليل تقني شامل لإنشاء مواقع مهنية من الصفر
- لبناء موقع ووردبريس جميل وقوي من الناحية الوظيفية، من الضروري استخدام قالب (Theme) مناسب.
- دليل شامل لعملية بناء المواقع الإلكترونية: تحليل خطوات كاملة من الصفر إلى الإطلاق المهني
- إتقان أساسيات Tailwind CSS: دليل تطوير الواجهات الأمامية الحديثة من الفئات العملية إلى التصميم التفاعلي
- دليل تقني وأفضل الممارسات لإتقان كامل عملية بناء المواقع الإلكترونية: من الصفر حتى النشر الفعلي
العربية