Tailwind CSS

Tailwind CSS إطار CSS يعتمد على الفئات المساعدة أولا، وينسق الصفحة بفئات صغيرة لكل منها غرض واحد تكتب مباشرة في HTML. ففئات مثل p-4 وtext-center وbg-blue-500 يضبط كل منها نمطا واحدا. ويجمع المطورون هذه الفئات لبناء أي تصميم دون كتابة الكثير من CSS المخصص.

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

يختار المطورون Tailwind CSS لأنه يسرع التنسيق ويبقي ملف CSS النهائي صغيرا. فلا حاجة لاختراع أسماء فئات أو التنقل بين ملفات HTML وCSS مع كل تغيير. كما يعطي Tailwind CSS سلما ثابتا للمسافات والألوان وأحجام الخطوط، وهذا يبقي التصميم مرتبا.

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

يثبت Tailwind CSS عبر npm ويربط بأداة البناء في المشروع، مثل Vite أو PostCSS أو Tailwind CLI. وفي الإصدار 4 من Tailwind CSS تضيف الحزمة ثم تستوردها في أعلى ملف CSS الرئيسي بالسطر @import "tailwindcss". ودليل التثبيت الرسمي فيه خطوات قصيرة لكل إطار شائع، ومنها Laravel وNext.js وVite.

Tailwind CSS مناسب للمبتدئين الذين يفهمون خصائص CSS الأساسية مثل margin وpadding وflexbox وgrid. فكل فئة في Tailwind تقابل خاصية CSS حقيقية، لذلك يجعل تعلم CSS أولا قراءة الفئات سهلة. أما المبتدئون الذين يتجاوزون أساسيات CSS فيعانون غالبا في إصلاح التخطيطات في Tailwind CSS.

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

يعمل التصميم المتجاوب في Tailwind CSS بإضافة بادئات نقاط التوقف مثل sm: وmd: وlg: قبل أي فئة مساعدة. وTailwind CSS مبني على الجوال أولا، فالفئة دون بادئة تطبق على كل الشاشات، والفئة ذات البادئة تطبق من نقطة التوقف تلك فما فوق. فمثلا text-sm md:text-lg تعطي نصا صغيرا على الجوال ونصا أكبر على الشاشات الأعرض.

نقاط التوقف الافتراضية في Tailwind CSS هي sm عند 640 بكسل، وmd عند 768 بكسل، وlg عند 1024 بكسل، وxl عند 1280 بكسل، و2xl عند 1536 بكسل. وكل نقطة توقف حد أدنى للعرض، وهذا يتوافق مع مبدأ الجوال أولا في Tailwind. ويمكن للمشروع تغيير هذه القيم أو إضافة نقاط جديدة في إعدادات السمة.

تضيف الوضع الداكن في Tailwind CSS بوضع البادئة dark: قبل أي فئة، مثل dark:bg-gray-900. وافتراضيا يتبع Tailwind CSS إعداد نظام تشغيل الزائر. وليتمكن المستخدمون من تبديل الوضع الداكن بزر، تضبط متغير dark ليعتمد على فئة أو خاصية data في الصفحة.

في الإصدار 4 من Tailwind CSS تخصص الألوان والخطوط بمتغيرات CSS داخل كتلة @theme في ملف CSS الرئيسي. فمتغير مثل --color-brand ينشئ تلقائيا فئات مثل bg-brand وtext-brand. وكانت الإصدارات الأقدم تستخدم ملف tailwind.config.js للمهمة نفسها، وما زال هذا الأسلوب يعمل في الإصدار 4 عبر خيار توافق.

قد يجعل Tailwind CSS كود HTML مزدحما، لأن العنصر الواحد قد يحمل فئات كثيرة. ومعظم الفرق تحل ذلك بتحويل الأنماط المتكررة إلى مكونات في إطارها، مثل مكون Blade أو React أو Vue. والمقابل أن الأنماط تبقى ظاهرة بجانب الكود، وهذا يجعل التعديلات سريعة وآمنة.

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

تعليمة @apply في Tailwind CSS تتيح لك استخدام فئات Tailwind المساعدة داخل قواعد CSS الخاصة بك. وهي مفيدة لتنسيق محتوى لا تتحكم فيه، مثل HTML الناتج من محرر نصوص. وينصح فريق Tailwind باستخدامها باعتدال، لأن المكونات عادة طريقة أنظف لإعادة استخدام الأنماط.

نعم، يعمل Tailwind CSS جيدا مع Laravel، ومشاريع Laravel الجديدة مجهزة لاستخدامه مع Vite. فتكتب فئات Tailwind في قوالب Blade، ويبني Vite ملف CSS النهائي. كما تستخدم حزم البداية في Laravel إطار Tailwind CSS لشاشات تسجيل الدخول ولوحة التحكم.

نعم، يعمل Tailwind CSS مع React وVue وSvelte ومعظم أطر JavaScript الأخرى. وتوضع الفئات في كود المكون عبر className في React أو class في Vue. ولأن كل مكون يحمل فئاته الخاصة، يتناسب Tailwind CSS جيدا مع الأطر القائمة على المكونات.

ليس لـ Tailwind CSS أثر مباشر على ترتيب البحث، لكنه قد يساعد SEO بشكل غير مباشر بإبقاء ملف CSS صغيرا والصفحات سريعة. فسرعة الصفحة جزء من إشارات تجربة الصفحة لدى Google. ويبقى المحتوى وبنية الصفحة ودلالات HTML أهم بكثير من أداة التنسيق.

القيم الاعتباطية في Tailwind CSS تتيح لك استخدام قيمة دقيقة غير موجودة في السمة بكتابتها بين قوسين مربعين. فمثلا w-[37%] أو top-[117px] ينشئ فئة لتلك القيمة بالضبط في الحال. والقيم الاعتباطية مفيدة للحالات الفردية، أما القيمة التي تتكرر كثيرا فمكانها السمة.

تعمل حالات المرور والتركيز في Tailwind CSS بإضافة بادئة حالة مثل hover: أو focus: أو active: قبل الفئة المساعدة. فمثلا bg-blue-500 hover:bg-blue-600 تجعل الزر أغمق عندما يمر عليه المؤشر. ويمكن الجمع بين البادئات ونقاط التوقف والوضع الداكن، مثل md:hover:underline.

لا، يتضمن Tailwind CSS نفسه الفئات المساعدة فقط، لا مكونات جاهزة مثل النوافذ المنبثقة أو أشرطة التنقل. فالمكونات الجاهزة تأتي من مجموعات منفصلة، مثل Tailwind Plus الرسمية أو مكتبات المجتمع مثل daisyUI وFlowbite. وكثير من الفرق تبني مجموعة مكونات صغيرة خاصة بها فوق الفئات المساعدة.

نعم، يدعم Tailwind CSS التخطيطات من اليمين إلى اليسار عبر المتغيرين rtl: وltr: والفئات المساعدة المنطقية. فالفئات المنطقية مثل ms-4 وpe-2 تضبط الهامش والحشوة في بداية السطر أو نهايته، فتنعكس تلقائيا في العربية. وهذا يجعل كودا واحدا يعمل لصفحات الإنجليزية والعربية معا.

نقل الإصدار 4 من Tailwind CSS الإعدادات إلى CSS عبر كتلة @theme وسطر @import واحد. كما جاء بمحرك بناء أسرع، واكتشاف تلقائي لملفات المحتوى، ومميزات CSS حديثة مثل طبقات التتالي cascade layers. ومعظم المشاريع التي تنتقل من الإصدار 3 تستطيع استخدام أداة الترقية الرسمية لتحديث كودها.

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

تبقي فئات Tailwind CSS منظمة بتحويل الأنماط المتكررة إلى مكونات، وترتيب الفئات بترتيب ثابت. وإضافة Prettier الرسمية لـ Tailwind CSS ترتب الفئات تلقائيا عند الحفظ. كما أن تعريف ألوان العلامة والمسافات في السمة يبقي الفئات قصيرة ومتسقة.

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