مروری بر استایل‌دهی در آسترو

# آشنایی با استایل‌دهی در Astro

## مفاهیم کلیدی
- **استایل‌دهی محدود شده**: استایل‌ها در فایل‌های Astro محدود به آن فایل هستند.
  - تگ‌های استایل به‌طور مشخص به فایل Astro مربوط می‌شوند.
  - باید داخل فایل ارجاع داده شوند تا استایل‌ها اعمال شوند.
- **ویژگی‌های داده‌ای**: Astro از ویژگی‌های داده‌ای برای استایل‌دهی به اجزاء استفاده می‌کند.

## روش‌های استایل‌دهی در Astro

### استایل‌های داخلی
- از ویژگی `style` برای استایل‌دهی داخلی استفاده کنید.
  - مثال: `style="background: black;"`

### CSS-in-JS
- اجازه می‌دهد از نحو JS در استایل‌دهی استفاده کنید.
  - مثال: `style={{ background: 'black' }}`

### ماژول‌های CSS
- یک شیوه‌نامه را وارد و از کلاس‌های خاص استفاده کنید.
  - پشتیبانی داخلی در Astro.

### ادغام با Tailwind
- به‌سادگی با Tailwind CSS از طریق CLI Astro ترکیب می‌شود.
  - دستور: `npx astro add tailwind`
  - `astro.config.mjs` را برای افزودن Tailwind به‌عنوان یک یکپارچه‌سازی به‌روزرسانی می‌کند.
- Tailwind 4 به وارد کردن تنظیمات به‌عنوان یک فایل CSS عمومی نیاز دارد.

## استایل‌های عمومی

### استفاده از استایل‌های عمومی
- استایل‌های عمومی به‌طور پیش‌فرض در اجزاء Astro موجود نیستند.
- با استفاده از ویژگی `is:global` در تگ‌های استایل، استایل‌ها را عمومی کنید.
- ورودی شیوه‌نامه‌های عمومی را در فایل‌های طرح‌بندی به‌منظور استایل‌دهی سایت وارد کنید.

### ایجاد شیوه‌نامه‌های عمومی
- یک دایرکتوری `styles` برای سازماندهی بسازید.
- استایل‌های عمومی مانند پس‌زمینه بدنه را تعریف کنید.
- در فایل‌های طرح‌بندی پایه برای اعمال جهانی وارد کنید.

### رفتار وارد کردن
- وارد کردن یک شیوه‌نامه آن را برای آن مؤلفه و فایل‌های فرزندانش عمومی می‌کند.
- برای محدود کردن محدوده، به مؤلفه‌ها یا طرح‌بندی‌های خاص وارد کنید.
- Astro به‌صورت هوشمند مدیریت واردات شیوه‌نامه را انجام می‌دهد تا از تکرار جلوگیری کند.

## بهترین شیوه‌ها
- از استایل‌های محدود شده برای استایل‌دهی خاص مؤلفه استفاده کنید.
- از Tailwind برای توسعه سریع و قالب‌بندی استفاده کنید.
- استایل‌های عمومی را در مؤلفه‌های طرح‌بندی مرکزی کنید برای حفظ همگنی.

## نتیجه‌گیری
- استایل‌دهی در Astro چندکاره است و می‌تواند با استایل‌های محدود شده یا عمومی به‌خوبی کنترل شود.
- ادغام با Tailwind، استایل‌دهی را با کلاس‌های کاربردی قابل‌استفاده مجدد ساده می‌کند.
- قدم‌های بعدی: یادگیری در مورد اسکریپت نویسی در Astro.