Open In App

Tailwind CSS Skew

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 16 Jun, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads