Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Tailwind CSS Skew

  • Last Updated : 16 Jun, 2021

This class accepts lots of value in tailwind CSS in which all the properties are covered in class form. The skew is used to transform an element in the 2D plane. Skew an element means to pick a point and push or pull it in different directions. In CSS, we can do that by using the CSS skew property. 

Skew Classes :

  • skew-x-{amount}: This class specifies the skew angle corresponding to the x-axis.
  • -skew-x-{amount}: This class specifies the skew angle corresponding to the reverse x-axis.
  • skew-y-{amount}: This class specifies the skew angle corresponding to the y-axis.
  • -skew-y-{amount}: This class specifies the skew angle corresponding to the reverse y-axis.

Note 1: Skew an element by first enabling transforms with the transform utility, then specifying the skew angle using the skew-x-{amount} and skew-y-{amount} utilities.

Note 2: The amount totally depends on your choices, you can set it as full as a percentage, or directly put the rem value.

 



Syntax:

<element class="transform skew-{axis}-{amount}">...</element>

Example 1: Skew angle corresponding to the positive x-axis and y-axis.

HTML




<!DOCTYPE html>
<html>
<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
    rel="stylesheet">
</head>
  
<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
    GeeksforGeeks
    </h1>
    <b>Tailwind CSS Skew Class</b>
    <div class="bg-green-300
                mx-16
                p-4
                justify-between
                grid grid-flow-col">
    <div class="bg-no-repeat
                w-16 h-16 transform skew-x-0"
        style=
        "background-image:url(
    </div>
    <div class="bg-no-repeat
                w-16 h-16 transform skew-x-12"
        style=
        "background-image:url(
    </div>
    <div class="bg-no-repeat
                w-16 h-16 transform skew-y-6"
        style="background-image:url(
    </div>
    <div class="bg-no-repeat
                w-16 h-16 transform skew-y-12"
        style="background-image:url(
    </div>
    </div>
</body>
</html>

Output:

Example 2: Skew angle corresponding to the reverse x-axis and y-axis.

HTML




<!DOCTYPE html>
<html>
<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
    rel="stylesheet">
</head>
  
<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
    GeeksforGeeks
    </h1>
    <b>Tailwind CSS Skew Class</b>
    <div class="bg-green-300
                mx-16
                p-4
                justify-between
                grid grid-flow-col">
    <div class="bg-no-repeat
                w-16 h-16 transform -skew-x-6"
        style=
        "background-image:url(
    </div>
    <div class="bg-no-repeat
                w-16 h-16 transform -skew-x-12"
        style=
        "background-image:url(
    </div>
    <div class="bg-no-repeat
                w-16 h-16 transform -skew-y-6"
        style="background-image:url(
    </div>
    <div class="bg-no-repeat
                w-16 h-16 transform -skew-y-12"
        style="background-image:url(
    </div>
    </div>
</body>
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!