Magdy Atef Zahran

Customizing Config File (tailwind.config.js) in Tailwind

حد دلوقتي إحنا شغالين بـ Tailwind زي ما هو out-of-the-box.
بس في مرحلة معينة هتحتاج تخصص المشروع بتاعك: ألوانك الخاصة، خطوطك، breakpoints إضافية… وهنا ييجي دور ملف : tailwind.config.js

إضافة ألوان خاصة

لو عندك براند بلون أساسي وثانوي:

// tailwind.config.js module.exports = { theme: { extend: { colors: { brand: { primary: "#1E40AF", secondary: "#FACC15", }, }, }, }, };

وتستعملهم عادي:

<button class="bg-brand-primary text-white">Click</button>

إضافة خطوط خاصة

extend: { fontFamily: { poppins: ["Poppins", "sans-serif"], }, }

وتستعمل:

extend: { screens: { 'xs': '480px', }, }

كده عندك xs: تعمل responsive من 480px

Reusable Spacing, Sizes, etc

ممكن تضيف مقاسات أو قيم جاهزة عندك:

extend: { spacing: { '128': '32rem', }, }

تستعملها:

تقدر تضيف Plugins للـ forms، typography، line-clamp … أو تكتب بتاعتك.

plugins: [ require('@tailwindcss/forms'), require('@tailwindcss/typography'), ]

الخلاصه…

ملف tailwind.config.js هو المكان اللي بتحوّل فيه Tailwind من مجرد framework عام لحاجة خاصة بمشروعك.
تقدر تعمل براند كامل، system للـ spacing والألوان والخطوط، وتخلي مشروعك consistent و scalable.