📌 مفهوم

کلاس‌های skew برای کج کردن المان‌ها روی محور X یا Y استفاده میشن.

در CSS معادلش:

transform: skewX(...);
transform: skewY(...);

📑 سینتکس کلی

skew-x-{value}
skew-y-{value}

• x → کج شدن افقی

• y → کج شدن عمودی

• {value} → مقدار زاویه (degree)

📑 مقادیر پیش‌فرض (Built-in)

همین مقادیر برای skew-y-{value} هم موجوده.

📌 مقادیر منفی هم داریم:

• -skew-x-12 → skewX(-12deg)

• -skew-y-6 → skewY(-6deg)

📌 مثال ساده

<div class="w-40 h-20 bg-blue-500 skew-x-12"></div>

📌 این div روی محور X به اندازه 12 درجه کج میشه.

📌 مثال ترکیبی

<div class="w-40 h-20 bg-green-500 skew-y-6 -skew-x-6"></div>

📌 این یکی همزمان روی X و Y کج میشه.

📌 استفاده روی Hover (انیمیشن)

<button class="px-6 py-3 bg-purple-600 text-white rounded-lg transform transition duration-500 hover:skew-x-6">
  Skew Me
</button>

📌 وقتی هاور کنی، دکمه کمی کج میشه.

📌 ترکیب با Scale و Rotate

<img src="https://placekitten.com/120/120" 
     class="rounded-lg transform transition duration-500 hover:scale-110 hover:rotate-6 hover:skew-y-6">

📌 روی هاور: تصویر بزرگ میشه + می‌چرخه + کج میشه.

📌 نکته حرفه‌ای

• Skew برای طراحی‌های خلاقانه مثل کارت‌ها، بنرها، دکمه‌های استایل خاص خیلی استفاده میشه.

• وقتی متن داخل skew بشه، کمی ناخوانا میشه، پس بیشتر روی background ها یا تصاویر استفاده کن.

• می‌تونی مقادیر سفارشی هم توی tailwind.config.js اضافه کنی.