January 28, 2025
التخصيص السهل في Tailwind CSS
هل تعبت من إضافة المتغيرات الداكنة يدويًا في مشروع Tailwind CSS؟ قم بتحسين التخصيص باستخدام متغيرات CSS لتوفير الوقت والعمل بسهولة أكبر. 🚀
Theme
Next.js
Tailwind CSS
React.js
مرحباً أصدقائي،
اليوم أود أن أشارككم طريقة بسيطة لإدارة السمات (Themes) في تطبيق الويب الخاص بك باستخدام Tailwind CSS. سنتحدث بشكل خاص عن كيفية التبديل بين السمات وتطبيق الأنماط بكفاءة دون الحاجة إلى تعديل كل صنف يدويًا.
إذا كنت قد عملت على تطبيقات تستخدم Tailwind، فمن المحتمل أنك استخدمت المتغير dark للتخصيص. مثل هذا المثال:
<p className="text-red-400 dark:text-red-500">...</p>
بينما هذا النهج يعمل، إلا أنه قد يصبح مكررًا ومملًا لأنك بحاجة إلى تحديث كل عنصر بشكل فردي. بدلاً من ذلك، سأوضح لك طريقة أفضل باستخدام متغيرات CSS. بهذه الطريقة، ستحتاج فقط إلى تعيين المتغيرات وستكون جاهزًا.
إعداد سمات الفاتح والداكن
في هذا المثال، لنفترض أننا نريد سمة فاتحة وأخرى داكنة. إليك كيفية تعريفها في ملف global.css:
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
}
.dark {
--primary-color: #2c3e50;
--secondary-color: #8e44ad;
}
هذا يُعرّف الألوان الرئيسية والثانوية لكلتا السمتين. يمكنك توسيع ذلك لإضافة المزيد من المتغيرات والسمات حسب حاجتك.
تكوين Tailwind
بعد ذلك، قم بتحديث ملف تكوين Tailwind (tailwind.config.ts) لجعل هذه المتغيرات متاحة في أصناف Tailwind:
darkMode: "class",
theme: {
extend: {
colors: {
primary: "var(--primary-color)",
secondary: "var(--secondary-color)",
},
},
},
مع هذا الإعداد:
-
يتم تفعيل الوضع الداكن عن طريق إضافة صنف
darkإلى علامة<html>أو<body>. -
المتغيرات المعرفة في
global.cssأصبحت الآن متاحة كألوان Tailwind.
استخدام الألوان
الآن، بدلاً من كتابة متغيرات dark: يدويًا في كل مكان، يمكنك ببساطة استخدام الألوان المعرفة كما يلي:
<p className="text-primary">هذا النص يستخدم اللون الرئيسي.</p> <p className="text-secondary">وهذا النص يستخدم اللون الثانوي.</p>ستقوم Tailwind بتطبيق الأنماط الصحيحة بناءً على السمة النشطة.
نصيحة إضافية
لسهولة أكبر، يمكنك استخدام هذه المتغيرات مباشرة في CSS للأنماط الافتراضية. على سبيل المثال:
p { color: var(--primary-color); }
بهذه الطريقة، ستتبع جميع علامات <p> اللون الرئيسي افتراضيًا، وإذا كنت بحاجة لتجاوز ذلك في حالات معينة، يمكنك استخدام أصناف Tailwind.
وهذا كل شيء! هذا النهج لا يوفر فقط الوقت ولكنه يحافظ على نظافة وقابلية صيانة الكود. جربه وأخبرني برأيك! 🚀
