stroke-width در Tailwind برای ضخامت خطوط SVG استفاده می‌شود. این ویژگی فقط روی المان‌های SVG که خط دارند (<line>, <circle>, <path> و غیره) تاثیر دارد.

🔹 کلاس‌ها و مقادیر پیش‌فرض

توجه: مقادیر می‌توانند در فایل tailwind.config.js سفارشی شوند.

🔹 استفاده در SVG

1. دایره با خط ضخامت 2

• stroke-2 → ضخامت خط 2px

• fill="none" → داخل دایره پر نشده

• currentColor → خط از رنگ متن والد پیروی می‌کند

2. خط ساده با ضخامت 4 و رنگ آبی

• stroke-4 → ضخامت خط 4px

• text-blue-600 → رنگ خط آبی

3. مسیر (path) با ضخامت 8 و رنگ قرمز

• stroke-8 → ضخامت خط 8px

• text-red-500 → رنگ خط قرمز

🔹 نکات مهم

1. محدود به SVG: این کلاس روی عناصر HTML عادی (مثل div یا p) کار نمی‌کند.

2. رنگ از stroke یا currentColor گرفته می‌شود: اگر بخوای رنگ متفاوت بدهی، از کلاس‌های رنگ Tailwind استفاده کن (text-red-500، text-green-400 و غیره).

3. سفارشی‌سازی: می‌توانی کلاس‌های بیشتر یا مقادیر دلخواه را در tailwind.config.js اضافه کنی:

module.exports = {
  theme: {
    extend: {
      strokeWidth: {
        '3': '3',
        '6': '6',
      }
    }
  }
}