Tidadigi Logo

Tailwind CSS Skew

Lớp này chấp nhận nhiều giá trị trong tailwind CSS. Tất cả các thuộc tính đều được trình bày dưới dạng class. Skew được dùng để biến đổi một phần tử trên 2D plane. Skew một phần tử nghĩa là chọn một điểm rồi đẩy hoặc kéo nó theo các hướng khác nhau. Trong CSS, ta có thể làm điều đó bằng CSS skew property. 

Skew Classes :

  • skew-x-{amount}: Class này chỉ định góc skew tương ứng với trục x.
  • -skew-x-{amount}: Class này chỉ định góc skew ngược lại tương ứng với trục x.
  • skew-y-{amount}: Class này chỉ định góc skew tương ứng với trục y.
  • -skew-y-{amount}: Class này chỉ định góc skew ngược lại tương ứng với trục y.

Note 1: Để skew một phần tử, hãy kích hoạt biến đổi bằng utility transform trước. Sau đó chỉ định góc skew bằng các utility skew-x-{amount} và skew-y-{amount}.

Note 2: Giá trị amount hoàn toàn phụ thuộc vào lựa chọn của bạn. Bạn có thể đặt nó ở dạng phần trăm hoặc trực tiếp dùng giá trị rem.

 

Syntax:

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

Example 1: Góc Skew tương ứng với trục x và trục y dương.

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(
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)">
    </div>
    <div class="bg-no-repeat
                w-16 h-16 transform skew-x-12"
        style=
        "background-image:url(
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)">
    </div>
    <div class="bg-no-repeat
                w-16 h-16 transform skew-y-6"
        style="background-image:url(
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)">
    </div>
    <div class="bg-no-repeat
                w-16 h-16 transform skew-y-12"
        style="background-image:url(
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)">
    </div>
    </div>
</body>
</html>

Output:

tailwind-css-skew

Example 2: Góc Skew tương ứng với x-axis và y-axis ngược.

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(
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)">
    </div>
    <div class="bg-no-repeat
                w-16 h-16 transform -skew-x-12"
        style=
        "background-image:url(
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)">
    </div>
    <div class="bg-no-repeat
                w-16 h-16 transform -skew-y-6"
        style="background-image:url(
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)">
    </div>
    <div class="bg-no-repeat
                w-16 h-16 transform -skew-y-12"
        style="background-image:url(
https://media.geeksforgeeks.org/wp-content/uploads/20210222211217/Screenshot20210222211207.png)">
    </div>
    </div>
</body>
</html>

Output:

tailwind-css-skew
Last Updated : 20/07/2025