📌 این ویژگی مشخص می‌کنه که آیا کلمات طولانی در متن می‌توانند با خط فاصله (-) در انتهای خط شکسته شوند یا نه.
در Tailwind از کلاس‌های hyphens-none, hyphens-manual, hyphens-auto استفاده می‌کنیم.

✅ کلاس‌ها

• hyphens-none → هیچ شکستن کلمه‌ای با خط فاصله انجام نمی‌شود

• hyphens-manual → فقط وقتی که خط فاصله در HTML وجود دارد، شکسته می‌شود

• hyphens-auto → مرورگر به صورت خودکار کلمات طولانی را با - می‌شکند

✅ مثال

<div class="w-48 border p-2 hyphens-none mb-2">
  Antidisestablishmentarianism یک کلمه طولانی است که شکسته نمی‌شود.
</div>

<div class="w-48 border p-2 hyphens-manual mb-2">
  Antidisestablish-mentarianism یک کلمه طولانی است که فقط در محل خط فاصله HTML شکسته می‌شود.
</div>

<div class="w-48 border p-2 hyphens-auto mb-2">
  Antidisestablishmentarianism یک کلمه طولانی است که مرورگر آن را خودکار شکسته می‌کند.
</div>

📌 نکات مهم

• hyphens-auto برای متون طولانی و responsive بسیار کاربردی است.

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

  • sm:hyphens-none md:hyphens-auto