Tailwind CSS - Skew

Creating Dynamic Shapes with Skew Transforms

Skew utilities are part of Tailwind’s transform family, allowing you to slant an element along its horizontal (X-axis) or vertical (Y-axis). This is a powerful tool for creating non-rectangular, dynamic designs and unique hover effects.

Skew Utilities

Apply these classes to an element to skew it. Combine them with transition utilities for smooth animations on hover or other states.

Class	CSS Properties
skew-x-0	transform: skewX(0deg);
skew-y-0	transform: skewY(0deg);
skew-x-1	transform: skewX(1deg);
skew-y-1	transform: skewY(1deg);
skew-x-3	transform: skewX(3deg);
skew-y-3	transform: skewY(3deg);
skew-x-6	transform: skewX(6deg);
skew-y-6	transform: skewY(6deg);
skew-x-12	transform: skewX(12deg);
skew-y-12	transform: skewY(12deg);

Example: Interactive Hover Effects

A common use for skew is to add a dynamic feel to interactive elements. By applying a skew on hover, you can create an engaging and memorable user experience. Remember to add transition utilities for a smooth effect.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Skew Hover Effects</title>
</head>
<body class="bg-slate-900 text-white flex justify-center items-center h-screen">
  <div class="flex gap-8">
    <!-- Horizontal Skew on Hover -->
    <div class="w-40 h-40 bg-violet-600 flex items-center justify-center rounded-lg shadow-lg
                transition duration-300 ease-in-out hover:skew-x-12 hover:scale-110">
      <span class="font-bold">Hover Me</span>
    </div>

    <!-- Vertical Skew on Hover -->
    <div class="w-40 h-40 bg-emerald-500 flex items-center justify-center rounded-lg shadow-lg
                transition duration-300 ease-in-out hover:-skew-y-12 hover:scale-110">
      <span class="font-bold">Hover Me</span>
    </div>
  </div>
</body>
</html>

Practical Application: Stylized Banners

Skew transforms are not just for animations. You can use them to create static, stylized shapes like angled banners or section dividers. Note that skewing an element also distorts its content, which can be part of the desired effect.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Stylized Banner</title>
</head>
<body class="bg-gray-100 p-8">
  <div class="bg-red-500 w-max py-4 px-10 -skew-x-12 rounded-md shadow-lg">
    <p class="text-white font-extrabold text-2xl skew-x-12">
      SALE!
    </p>
  </div>
  <p class="mt-4 text-gray-600">Here, we apply a negative skew to the container and an opposite, positive skew to the content to keep the text upright.</p>
</body>
</html>

Modern Features & Best Practices

• Arbitrary Values: Don’t see the exact angle you need? Tailwind’s JIT (Just-In-Time) engine lets you use any value directly in your class name. For example: class="skew-x-[15deg]" or class="-skew-y-[8deg]".
• Hardware Acceleration: All of Tailwind’s transform utilities (including skew, scale, rotate, translate) are automatically hardware accelerated in modern browsers, ensuring your animations are smooth and performant.
• Content Distortion: Be mindful that skewing distorts everything inside the element, including text and images. This can impact readability. For significant skews, it’s often best used on decorative elements or containers where the content is minimal or also transformed to compensate.