الأنماط العامّة
// app/layout.tsx
import "./globals.css";
CSS Modules (نطاق محلّي)
// Button.module.css
.btn { background: purple; }
import styles from "./Button.module.css";
<button className={styles.btn}>زر</button>
أسماء الأصناف تُولَّد فريدة فلا تتعارض.
Tailwind CSS (الأكثر شيوعًا)
يأتي مدمجًا عند إنشاء المشروع:
<button className="rounded-lg bg-purple-600 px-4 py-2 text-white">
زر
</button>
دعم RTL للعربية
<html lang="ar" dir="rtl">
استخدم خصائص Tailwind المنطقية (ms-, me-, ps-, pe-) بدل ml/mr لتعمل
تلقائيًا مع اتجاه RTL.
🎯 التالي: الصور والخطوط.