Tailwind CSS - Scale

Previous
Quiz
Next

Tailwind CSS Scale is a utility that is used to apply transformation by scailing an element.

Tailwind CSS Scale Classes

The following is the list of Tailwind CSS Scale Classes that are used to apply Scailing Transform

Class CSS Properties
scale-0 transform: scale(0);
scale-x-0 transform: scaleX(0);
scale-y-0 transform: scaleY(0);
scale-50 transform: scale(.5);
scale-x-50 transform: scaleX(.5);
scale-y-50 transform: scaleY(.5);
scale-75 transform: scale(.75);
scale-x-75 transform: scaleX(.75);
scale-y-75 transform: scaleY(.75);
scale-90 transform: scale(.9);
scale-x-90 transform: scaleX(.9);
scale-y-90 transform: scaleY(.9);
scale-95 transform: scale(.95);
scale-x-95 transform: scaleX(.95);
scale-y-95 transform: scaleY(.95);
scale-100 transform: scale(1);
scale-x-100 transform: scaleX(1);
scale-y-100 transform: scaleY(1);
scale-105 transform: scale(1.05);
scale-x-105 transform: scaleX(1.05);
scale-y-105 transform: scaleY(1.05);
scale-110 transform: scale(1.1);
scale-x-110 transform: scaleX(1.1);
scale-y-110 transform: scaleY(1.1);
scale-125 transform: scale(1.25);
scale-x-125 transform: scaleX(1.25);
scale-y-125 transform: scaleY(1.25);
scale-150 transform: scale(1.5);
scale-x-150 transform: scaleX(1.5);
scale-y-150 transform: scaleY(1.5);

Functionality of Tailwind CSS Scale Classes

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

Tailwind CSS Transform Examples

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

Scailing Element

The below example is illustrating the use of scale-* 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 Scale Class
    </h2>
    <div class="flex gap-4">
        <div class="w-28 h-28 p-6 bg-green-500 text-center font-bold 
                text-white text-center font-bold text-white  
                hover:scale-75  duration-500 ">
            Hover: scale-75
        </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:scale-125 duration-500 ">
            Hover: scale-125
        </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:scale-150  duration-500 ">
            Hover: scale-150
        </div>
    </div>
</body>
</html>

Scailing Element horizontally & Vertically

The below example is illustrating the use of scale-x-* & scale-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 Scale-x-75 & Scale-y-75 Class
    </h2>
    <div class="flex gap-4">
        <div class="w-28 h-28 p-6 bg-green-500 text-center font-bold 
                text-white text-center font-bold text-white  
                hover:scale-x-75 duration-500 ">
            Hover: scale-x-75
        </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:scale-y-75 duration-500 ">
            Hover: scale-y-75
        </div>
    </div>
</body>
</html>
Print Page
Previous
Next