📌 در Tailwind برای تغییر رنگ پس‌زمینه از کلاس‌های bg-* استفاده می‌کنیم.
رنگ‌ها می‌توانند از پالت پیش‌فرض Tailwind یا رنگ‌های سفارشی باشند.

✅ کلاس‌ها

• bg-transparent → پس‌زمینه شفاف

• bg-black → سیاه

• bg-white → سفید

• bg-gray-500 → خاکستری

• bg-red-500 → قرمز

• bg-green-500 → سبز

• bg-blue-500 → آبی

• bg-yellow-500 → زرد

• و بسیاری دیگر (اعداد 100 تا 900 شدت رنگ را مشخص می‌کنند)

✅ مثال

<div class="bg-black text-white p-4 mb-2">پس‌زمینه سیاه</div>
<div class="bg-white text-black p-4 mb-2">پس‌زمینه سفید</div>
<div class="bg-gray-500 text-white p-4 mb-2">پس‌زمینه خاکستری</div>
<div class="bg-red-500 text-white p-4 mb-2">پس‌زمینه قرمز</div>
<div class="bg-green-500 text-white p-4 mb-2">پس‌زمینه سبز</div>
<div class="bg-blue-500 text-white p-4 mb-2">پس‌زمینه آبی</div>
<div class="bg-yellow-500 text-black p-4 mb-2">پس‌زمینه زرد</div>

📌 نکات مهم

• می‌توان از arbitrary value برای رنگ سفارشی استفاده کرد:

  • bg-[#ff5733] → رنگ HEX دلخواه

• می‌توان با responsive ترکیب کرد:

  • sm:bg-red-500 md:bg-blue-500 → موبایل قرمز، دسکتاپ آبی