ما هو Tailwind CSS؟
تيلويند CSS هو إطار عمل CSS يعطي الأولوية للوظائف، ويساعد المطورين على إنشاء واجهات مستخدم مخصصة بسرعة من خلال توفير مجموعة كبيرة من الفئات العملية ذات الحجم الصغير والقابلة للدمج. على عكس الأطر مثل Bootstrap أو Bulma التي تقدم مكونات مسبقة (مثل الأزرار والبطاقات)، لا يقدم Tailwind CSS أي مكونات جاهزة للاستخدام. بدلاً من ذلك، يقدم مجموعة من الفئات الأساسية، مثل: text-center、bg-blue-500、p-4、flex وما إلى ذلك، يقوم المطورون ببناء أي تصميم عن طريق دمج هذه الفئات مباشرةً على عناصر HTML.
فلسفتها الأساسية هي “الأولوية للوظيفة”، وتهدف إلى تمكين المطورين من تحقيق أساليب مخصصة للغاية دون الحاجة إلى مغادرة ملفات HTML. تعمل هذه الطريقة على تحسين كفاءة التطوير بشكل كبير، وتقلل من تكلفة التبديل المتكرر بين ملفات CSS وملفات HTML، كما تتجنب مشاكل تعارض أسماء الفئات والأساليب المفرطة في CSS التقليدية. من خلال عملية بناء ذكية، يمكن لـ Tailwind إزالة جميع الأساليب غير المستخدمة تلقائيًا، وينتج في نهاية الأمر ملف CSS محسّنًا ومُصغّرًا للغاية.
المفاهيم الأساسية وآلية العمل
لاستخدام Tailwind CSS بكفاءة، من الضروري فهم مبادئ التصميم الأساسية وآلية عمله.
القراءة الموصى بها دليل مبتدئين لـ Tailwind CSS: بناء واجهات رائعة ومتجاوبة من الصفر。
نموذج يعطي الأولوية للفئات العملية.
في CSS التقليدي، نقوم عادةً بإنشاء أسماء فئات دلالية (مثل <) للمكونات أو العناصر. .btn-primaryثم تُعرّف أنماط هذه الفئات في ملف CSS. تقلب Tailwind هذا النمط، حيث يدعو إلى “أولوية الفئات العملية”. وهذا يعني أن الأنماط يتم تعريفها عن طريق تطبيق العديد من الفئات الصغيرة والمخصصة مباشرةً في HTML. على سبيل المثال، يمكن كتابة زر ما على النحو التالي:
<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
点击我
</button>يقابل كل فئة هنا إعلان CSS محددًا.bg-blue-600 تعيين لون الخلفية.text-white تعيين لون النصpy-2 تعيين الهوامش الداخلية العمودية. ميزة هذا الأسلوب هي أن القيود التصميمية مضمنة مباشرةً في النظام (مثل الألوان والمسافات والمقاييس)، مما يضمن اتساق التصميم ويسرع بشكل كبير من تطوير النماذج الأولية والتكرار.
التصميم التفاعلي والحالات المتغيرة.
يحتوي Tailwind على نظام تصميم مستجيب قوي. تشمل نقاط الانقطاع المستجيبة لديه (مثل sm、md、lg、xl、2xlاعتماد استراتيجية "الجوال أولاً". وهذا يعني أن الفئات العملية غير المضاف إليها بادئات تكون ملائمة لجميع أحجام الشاشات، بينما الفئات المضاف إليها بادئات (مثل <) ملائمة لأحجام الشاشات الأكبر حجمًا. md:flexإذا قمت بتغيير قيمة هذا الخيار، فيتم تطبيق التغييرات على نقطة التوقف هذه وما فوقها.
<div class="text-sm md:text-base lg:text-lg">
يتغير حجم هذا النص وفقًا لأحجام الشاشات المختلفة.
</div>بالإضافة إلى ذلك، يدعم Tailwind مجموعة متنوعة من خيارات الحالة، مثل التمرير بمؤشر الماوس (hover).hover:) والتركيز (focus:) والتفعيل (active:) وحظر (disabled:)، بل إنه مصمم أيضًا للوضع الداكن. dark: أشكال متعددة. يمكن دمج هذه الأشكال بسهولة مع أي فئة عملية دون كتابة محددات CSS مخصصة.
<button class="bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700">
自适应按钮
</button>التكوين والتخصيص
على الرغم من أن Tailwind يوفر نظام تصميم افتراضي غني، إلا أنه ليس نظامًا مغلقًا على الإطلاق. قابلية التكوين القوية هي واحدة من مزاياه الرئيسية. عبر المجلد الجذري للمشروع، يمكنك تعديل تكوينات Tailwind لتناسب احتياجاتك بدقة. tailwind.config.js يمكن للمطورين تخصيص كل جانب من جوانب الإطار بشكل متعمق باستخدام المستندات.
القراءة الموصى بها الدليل النهائي لـ Tailwind CSS: بناء صفحات ويب حديثة ومستجيبة من الصفر.。
يمكنك هنا توسيع أو تغطية ألوان الموضوع وخطوطه ونسب المسافات وقيم نقاط الانقطاع ودائرة حدوده وما إلى ذلك تمامًا. على سبيل المثال، لإضافة لون علامة تجارية وتعديل وحدات المسافة الافتراضية:
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'brand': '#3a86ff',
},
spacing: {
'128': '32rem',
}
},
},
}بعد الإعداد، يمكنك استخدامه في المشروع. bg-brand أو p-128 مثل هذه الفئات. هذا التصميم يتيح لـ Tailwind التكيف بشكل مثالي مع أي معايير تصميمية.
عملية تطوير التطبيقات العملية.
بعد أن فهمنا المفهوم، دعونا نرى كيف يمكننا تطبيق Tailwind CSS في التطوير في مشاريع حقيقية.
مرحلة تهيئة المشروع والبناء المتكاملة.
أولاً، تحتاج إلى دمج Tailwind CSS في أداة البناء الخاصة بك. يدعم Tailwind CSS PostCSS، لذا يمكنه العمل بسلاسة مع سلاسل الأدوات الحديثة للواجهة الأمامية مثل Vite و Webpack و Next.js. على سبيل المثال، في مشروع Vite بسيط، قم بتثبيت التبعيات:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -pسيتم إنشاء هذا. tailwind.config.js و postcss.config.js الملف… بعد ذلك، في ملف CSS الرئيسي الخاص بك (الذي عادةً ما يكون…) src/index.css أو src/app.cssإضافة تعليمات Tailwind في الملف (.css):
@tailwind base;
@tailwind components;
@tailwind utilities;أخيرًا، تأكد من أنك tailwind.config.js في هذا الملف، content تم تكوينه بشكل صحيح ليشير إلى ملفات القالب الخاصة بك، مثل HTML و JSX و Vue، حتى يمكن لـ Tailwind مسحها وإنشاء الأنماط المقابلة.
القراءة الموصى بها دليل تعلم CSS من Tailwind: بناء صفحات ويب حديثة ومتجاوبة من الصفر。
module.exports = {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
// ... 其他配置
}بناء مكونات قابلة لإعادة الاستخدام.
على الرغم من أن الاستخدام المباشر للفئات العملية فعال للغاية، إلا أن تكرار كتابة سلسلة طويلة من أسماء الفئات في كل مكان عندما يتم تكرار نمط واجهة المستخدم في أماكن متعددة يمكن أن يقلل من قابلية الصيانة. يقدم Tailwind عدة حلول لذلك.
أحد الأساليب هو استخدام @apply تستخرج الأوامر الأنماط المشتركة في CSS، وتقوم بإنشاء فئات مكونات مخصصة. وهذا مفيد بشكل خاص عندما تحتاج إلى مزج بعض أنماط Tailwind مع CSS مخصص.
.btn-primary {
@apply py-2 px-4 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، يكفي استخدام اسم فئة واحدة فقط:<button class="btn-primary">。
بالنسبة للأطر المستندة إلى المكونات (مثل React و Vue)، تتمثل أفضل الممارسات في التغليف مباشرةً على مستوى المكونات. قم بتغليف سلسلة طويلة من فئات Tailwind في مكون React أو Vue قابل لإعادة الاستخدام، واستخدم Props للتحكم في الأجزاء المتغيرة منها.
// React 组件示例
function Button({ children, variant = 'primary' }) {
const baseClasses = "py-2 px-4 font-semibold rounded-lg shadow-md focus:outline-none focus:ring-2";
const variantClasses = {
primary: "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-400",
secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-400",
};
return (
<button className={`${baseClasses} ${variantClasses[variant]}`}>
{children}
</button>
);
}يجمع هذا الأسلوب بين مرونة Tailwind وقابلية صيانة الكود.
الميزات المتقدمة وتحسينات الأداء
مع توسع حجم المشروع، تحتاج إلى إتقان بعض الميزات المتقدمة لـ Tailwind للحفاظ على قوة وموثوقية مكتبة الكود الخاصة بك.
القيم الديناميكية ومحرك JIT.
في إصدارات سابقة، لم يكن بإمكان Tailwind معالجة أسماء الفئات التي يتم إنشاؤها ديناميكيًا مباشرةً (مثل <). p-${size}منذ إدخال محرك Just-In-Time (JIT) في Tailwind CSS الإصدار 2.1، أصبح هذا هو الوضع الافتراضي. يعمل وضع JIT على إنشاء الأنماط حسب الحاجة، مما يؤدي إلى تحسين كبير في الأداء وميزات إضافية.
يجعل ذلك إنشاء قيم عشوائية ممكنًا. يمكنك استخدام الأقواس المربعة في اسم الفئة لإنشاء فئات مساعدة لمرة واحدة ولكنها صالحة تمامًا:
<div class="top-[117px] w-[calc(100%+1rem)] bg-[#1da1f2]">
<!-- 使用任意值 -->
</div>يعمل نموذج JIT أيضًا على تسريع سرعة تجميع خادم التطوير بشكل كبير، حيث لم تعد بحاجة إلى الانتظار لملف CSS ضخم.
تحكم في حجم الملفات وتحسين الإنتاج.
أحد الشواغل الشائعة للمطورين هو ما إذا كانت ملفات CSS النهائية ستكون ضخمة جدًا بسبب العدد الكبير من أسماء الفئات في HTML. هذا هو بالضبط ما يجعل تصميم Tailwind رائعًا. ومن خلال التكوين الصحيح، content مسار الملفات المصدرية، ستقوم عملية بناء Tailwind بتحليل ملفات مشروعك بذكاء، تمامًا مثل هز الأشجار لجمع التفاح، وستقوم بإنشاء فئات CSS التي تستخدمها فعليًا في مشروعك فقط.
يعني ذلك أنه بغض النظر عن مكان وجودك، tailwind.config.js يحدد هذا القسم حجم لوحة الألوان أو مقياس المسافات، بشرط ألا يستخدمه مشروعك. bg-rose-300 إذا كان هذا الفصل غير موجود، فلن يظهر في أي ملف CSS لبيئة الإنتاج النهائية. من خلال هذه العملية، يكون ملف CSS الناتج عادةً صغيرًا جدًا (غالبًا ما يكون أقل من 10 كيلوبايت)، مما يضمن أداءً ممتازًا.
لمزيد من التحسين، تأكد من تمكين ضغط CSS أثناء بناء الإنتاج. إذا كنت تستخدم Tailwind CLI، فيمكنك إضافة: --minify العلامة. في معظم البيئات المتكاملة، تتولى إضافة PostCSS في وضع الإنتاج معالجة الضغط تلقائيًا.
الملخصات
يعيد Tailwind CSS تعريف سير عمل تطوير الأنماط الأمامية من خلال منهجيته الفريدة في تحديد الأولويات للفئات العملية. يعمل على دمج قيود نظام التصميم في أسماء الفئات، مما يساعد على تسريع عملية التطوير وضمان اتساق التصميم. يقدم مجموعة كاملة وفعالة من الحلول، بدءًا من أدوات الاستجابة إلى المتغيرات الحالية، من مستوى التخصيص العميق إلى محرك JIT القابل للتوليد حسب الطلب. على الرغم من أن الأمر يتطلب في البداية التكيف مع نمط كتابة العديد من أسماء الفئات في HTML، إلا أن زيادة كفاءة التطوير، والقدرة الكبيرة على التخصيص، وتحسين الأداء أثناء الإنتاج، تجعله أداة مفضلة في تطوير الويب الحديث. إن إتقان Tailwind CSS يعني أنك قد اكتسبت قدرة قوية على تحويل التصميمات إلى رمز عالي الجودة وقابل للصيانة بسرعة كبيرة.
الأسئلة الشائعة الأسئلة المتداولة
هل Tailwind CSS مناسب لجميع المشاريع؟
لا يعد Tailwind CSS حلاً مناسبًا لجميع المشاريع. إنه مناسب بشكل خاص للمشاريع متوسطة إلى كبيرة الحجم التي تتطلب تصميمًا مخصصًا للغاية، أو تطويرًا سريعًا للنماذج الأولية، أو عندما يرغب الفريق في فرض معايير تصميم موحدة.
بالنسبة للصفحات الثابتة التي تسعى إلى البساطة المطلقة وتتضمن كمية ضئيلة من شفرة CSS، أو المشاريع التي يتم تصميمها بالكامل باستخدام مكتبات المكونات التقليدية (مثل Material-UI)، فإن فوائد استخدام Tailwind قد تكون محدودة، بل قد تزيد من تكلفة التعلم. يجب موازنة احتياجات المشروع من المرونة في التصميم وسرعة التطوير عند اتخاذ القرار.
هل سيؤدي كتابة العديد من أسماء الفئات في HTML إلى جعل الشفرة صعبة القراءة؟
هذا في الواقع مخاوف شائعة، خاصةً عند التعامل مع مكونات معقدة. قد تجعل سلاسل أسماء الفئات الطويلة HTML تبدو فوضوية.
المفتاح لحل هذه المشكلة يكمن في ممارسات تنظيم الكود الجيدة. بالنسبة للعناصر البسيطة، يكون استخدام أسماء الفئات مباشرة طريقة واضحة وفعالة. أما بالنسبة للكتل الواجهة المستخدمة المعقدة والمتكررة، فمن الموصى به شدًا بتغليفها في مكونات قابلة لإعادة الاستخدام (مثل مكونات React أو Vue أو Svelte)، مع إخفاء تفاصيل الأنماط داخل هذه المكونات نفسها. بالإضافة إلى ذلك، يمكن است @apply تقوم الأوامر باستخراج مجموعات الفئات الشائعة وتحويلها إلى فئات CSS ذات مغزى. كما أن استخدام أدوات التنسيق والفصل بشكل مناسب (مثل إضافة Tailwind CSS لـ Prettier) يمكن أن يحسن بشكل كبير من قابلية قراءة قوائم الفئات الطويلة.
كيف تتعامل Tailwind CSS مع توافق المتصفحات؟
لا يضيف Tailwind CSS تلقائيًا بادئات المتصفح أو يعالج توافق CSS. يتم إنجاز هذا الجزء بواسطة Autoprefixer، الذي يعتمد عليه Tailwind CSS.
في وضع المشروع القياسي، عندما تقوم بتشغيل npx tailwindcss init -p عندما يحدث ذلك، يتم إنشاء ملف تكوين PostCSS تلقائيًا، والذي يحتوي بالفعل على Autoprefixer. تقوم Autoprefixer بإضافة بادئات الموردين تلقائيًا إلى خصائص CSS المطلوبة، وفقًا لقواعد البيانات مثل Can I Use. -webkit-， -moz-لا تحتاج سوى إلى التأكد من تشغيل PostCSS بشكل صحيح في عملية بناء الإنتاج.
كيف يمكن توسيع أو تخصيص الأنماط الافتراضية لـ Tailwind؟
المدخل الرئيسي لتخصيص Tailwind هو tailwind.config.js ملف. يمكنك تعديل هذا الملف من خلال theme يمكنك استخدام مكونات إضافية لتوسيع أو تغطية الموضوع الافتراضي.
إذا كنت ترغب فقط في إضافة قيم جديدة دون استبدال الفئة بأكملها، فيجب أن تفعل ذلك في theme.extend يتم إجراء التهيئة على المستوى العام للكائن، مما يحافظ على جميع القيم الافتراضية ويضيف قيمك المخصصة. إذا كنت ترغب في استبدال فئة معينة (مثل الألوان) بالكامل، فقم بذلك مباشرةً في theme \nتحت الكائن (وليس فوقه). extend يمكنك تعريف هذه الفئة في ال CSS. بالإضافة إلى ذلك، يمكنك أيضًا كتابة CSS مخصص واستخدامه. @layer تعليمات لإدراج الأنماط في Tailwind. base、components أو utilities في الطبقات، من أجل تحقيق تخصيص أكثر تعقيدًا.
ما التالي، ما التالي؟
القراءة الموسعة والمعرفة العملية
فيما يلي بعض الموضوعات ذات الصلة بموضوع هذه المقالة وهي مناسبة لمزيد من القراءة المتعمقة. وغالباً ما يكون من الأفضل إعطاء الأولوية للبدء بالمقال الأقرب إلى مشكلتك الحالية ثم التوسع تدريجياً إلى المواضيع المحيطة.
- بناء المواقع الإلكترونية: دليل تقني شامل لإنشاء مواقع مهنية من الصفر
- لبناء موقع ووردبريس جميل وقوي من الناحية الوظيفية، من الضروري استخدام قالب (Theme) مناسب.
- دليل شامل لعملية بناء المواقع الإلكترونية: تحليل خطوات كاملة من الصفر إلى الإطلاق المهني
- إتقان أساسيات Tailwind CSS: دليل تطوير الواجهات الأمامية الحديثة من الفئات العملية إلى التصميم التفاعلي
- دليل تقني وأفضل الممارسات لإتقان كامل عملية بناء المواقع الإلكترونية: من الصفر حتى النشر الفعلي
العربية