Tailwind CSS - Skew

Previous
Quiz
Next

Tailwind CSS Skew is a utility that is used to apply transformation by skewing an element.

Tailwind CSS Skew Classes

The following is the list of Tailwind CSS Skew Classes that are used to apply Skewing Transform

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-2 transform: skewX(2deg);
skew-y-2 transform: skewY(2deg);
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);

Functionality of Tailwind CSS Skew Classes

  • skew-x-*: Class is used to skew an element horizontally by a specific value. {*} here specifying the different Skewing value that can be set as per the need.
  • skew-y-*: Class is used to skew an element vertically by a specific value. {*} here specifying the different Skewing value that can be set as per the need.

Tailwind CSS Transform Examples

The following example will illustrate the different transformation for an element.

Skewing Element Horizontally

The below example is illustrating the use of skew-x-* class.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Skew Classes
    </h2>
    <div class="flex gap-6">
            <div class="w-28 h-28 p-6 bg-green-500 text-center font-bold 
                        text-white text-center font-bold text-white  
                        hover:skew-x-6 duration-500 ">
                Hover: skew-x-6
            </div>
            <div class="w-28 h-28 p-6 bg-green-500 text-center font-bold 
                        text-white text-center font-bold text-white  
                        hover:skew-x-12 duration-500 ">
                Hover: skew-x-12
            </div>
    </div>
</body>
</html>

Skewing Element Vertically

The below example is illustrating the use of skew-y-* class.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Skew Classes
    </h2>
    <div class="flex gap-6">
            <div class="w-28 h-28 p-6 bg-green-500 text-center font-bold 
                        text-white text-center font-bold text-white  
                        hover:skew-y-6 duration-500 ">
                Hover: skew-y-6
            </div>
            <div class="w-28 h-28 p-6 bg-green-500 text-center font-bold 
                        text-white text-center font-bold text-white  
                        hover:skew-y-12 duration-500 ">
                Hover: skew-y-12
            </div>
    </div>
</body>
</html>
Print Page
Previous
Next