Magdy Atef Zahran

كتابة Utilities مخصصة (Custom Classes) في Tailwind

Tailwind مليان Utilities جاهزة لأي حاجة تقريبًا. بس في بعض الأحيان بتحتاج تكتب Utility خاصة بيك عشان تعمل Style متكرر أو تضيف ميزة مش موجودة جاهزة. وهنا ييجي دور Custom Utilities.

الطريقة الأولى: استخدام `@layer` في CSS

Tailwind بيوفر لك الـ @layer directive عشان تضيف كود CSS جوة الـ pipeline بتاعه.

🔹 مثال: تعمل Class جاهزة للـ Card:

@layer utilities { .card { @apply bg-white shadow-md rounded-xl p-6; } .btn-primary { @apply bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition; } }

دلوقتي تقدر تستخدم .card أو .btn-primary زي أي Utility في Tailwind

<div className="card"> <h2 className="text-xl font-bold">Hello Tailwind</h2> <button className="btn-primary">Click Me</button> </div>

الطريقة الثانية: تعديل `tailwind.config.js`

لو عاوز تضيف Utilities جديدة أو extend قيم موجودة.

🔹 مثال: إضافة ألوان جديدة

// tailwind.config.js module.exports = { theme: { extend: { colors: { brand: { light: "#7dd3fc", DEFAULT: "#0ea5e9", dark: "#0369a1", }, }, }, }, };

وبكده تقدر تستخدم:

<div class="bg-brand text-white">My Brand Color</div>

الطريقة الثالثة: إضافة Plugins مخصصة

لو محتاج تعمل Utility معقدة شوية، ممكن تكتب Plugin بنفسك.

🔹 مثال: Utility لعمل text-shadow:

// tailwind.config.js const plugin = require("tailwindcss/plugin"); module.exports = { plugins: [ plugin(function({ addUtilities }) { const newUtilities = { ".text-shadow": { textShadow: "2px 2px 4px rgba(0,0,0,0.3)", }, ".text-shadow-md": { textShadow: "4px 4px 6px rgba(0,0,0,0.4)", }, }; addUtilities(newUtilities, ["responsive", "hover"]); }), ], };

واستخدمها كده:

<h1 class="text-4xl font-bold text-shadow-md">Custom Shadow!</h1>