Magdy Atef Zahran

استخدام Plugins جاهزة (Typography – Forms – Aspect Ratio) في Tailwind

🎯 الأول: يعني إيه Plugins في Tailwind؟

الـ Plugins عبارة عن إضافات جاهزة بيقدمها فريق Tailwind (أو المجتمع) علشان تزودك بـ Utilities جديدة مش موجودة افتراضيًا.
بمعنى إنك تكتب كلاس وتاخد سلوك كامل بدل ما تكتب استايلات طويلة

✍️ 1. Tailwind Typography

لو بتكتب مقالات أو Blogs وعايز الـ content يبقى مقروء بشكل احترافي:

npm install @tailwindcss/typography

وبعدين ضيفه في tailwind.config.js:

plugins: [<br /> require('@tailwindcss/typography'),<br /> ]

الاستخدام:

<article class="prose lg:prose-xl"><br /> <h1>Welcome to Tailwind</h1><br /> <p>This is styled text with Typography plugin.</p><br /> </article>

الكلاس prose بيحول النصوص لعناصر جاهزة (Headers، Paragraphs، Lists… إلخ) بشكل جميل.

✍️ 2. Tailwind Forms

الـ Forms الافتراضية شكلها “ممل”. هنا بييجي دور Plugin الـ Forms.

npm install @tailwindcss/forms

plugins: [<br /> require('@tailwindcss/forms'),<br /> ]

الاستخدام:

<input type="text" class="form-input" placeholder="Your name" /><br /> <select class="form-select"><br /> <option>Option A</option><br /> <option>Option B</option><br /> </select>

الـ plugin بيخلي الـ Inputs و الـ Selects أكثر جمالًا وتناسقًا مع باقي التصميم