التنسيق (Styling)

الدرس 17 من 25· ⏱ 1 دقائق قراءة

الأنماط العامّة

// app/layout.tsx
import "./globals.css";

// Button.module.css
.btn { background: purple; }

import styles from "./Button.module.css";
<button className={styles.btn}>زر</button>

أسماء الأصناف تُولَّد فريدة فلا تتعارض.

يأتي مدمجًا عند إنشاء المشروع:

<button className="rounded-lg bg-purple-600 px-4 py-2 text-white">
  زر
</button>

<html lang="ar" dir="rtl">

استخدم خصائص Tailwind المنطقية (ms-, me-, ps-, pe-) بدل ml/mr لتعمل تلقائيًا مع اتجاه RTL.

🎯 التالي: الصور والخطوط.

هل كان هذا الدرس مفيدًا؟