Open In App

Tailwind CSS Scale

Last Updated : 23 Mar, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

This class accepts lots of value in tailwind CSS in which all the functional properties are covered in class form. This class is used to resize the element in the 2D plane. It scales the elements in horizontal and vertical directions. In CSS, we can do that by using the CSS scale() function.

Scale classes:

  • scale-0|50|75|90|95|100|105|110|125|150: This class is used to scale on both axis percentage-wise.
  • scale-x-0|50|75|90|95|100|105|110|125|150: This class is used to scale on x-axis percentage-wise.
  • scale-y-0|50|75|90|95|100|105|110|125|150: This class is used to scale on y-axis percentage-wise.

Syntax:

<element class="scale-{axis-percentage}">...</element>

Example:

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 Scale 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 scale-50" 
        style= 
        "background-image:url( 
    </div
    <div class="bg-no-repeat 
                w-16 h-16 transform scale-75" 
        style= 
        "background-image:url( 
    </div>
    <div class="bg-no-repeat 
                w-16 h-16 transform scale-100" 
        style="background-image:url( 
    </div
    <div class="bg-no-repeat 
                w-16 h-16 transform scale-125" 
        style="background-image:url( 
    </div>
    </div
</body
</html


Output:

CSS Scale Class



Previous Article
Next Article

Similar Reads

How to add scale animation on hover using Tailwind CSS in React ?
In this article, we'll see how to add scale animation on hover using tailwind CSS in a ReactJS app. The hover effect appears when a user positions the cursor over an element. In tailwind CSS, the scale utility class helps in getting the zoom effect over an element. PrerequisitesReact JSTailwind CSSApproach to Add Scale AnimationTo add scale animati
3 min read
What is the use of the tailwind.config.js file in Tailwind CSS ?
The tailwind.config.js file in Tailwind CSS serves as a central configuration hub for customizing the framework. It allows you to define colors, fonts, breakpoints, and more, tailoring Tailwind to fit your project's specific design and functionality requirements. Syntax:/** @type {import('tailwindcss').Config} */module.exports = { content: [], them
1 min read
How to stretch and scale background image using CSS?
The background-size property is used to stretch and scale the background image. This property set the size of the background image. Here we will see all possible examples of background-size and background-scale properties. Syntax: background-size: auto|length|cover|contain|initial|inherit;cover: This property value is used to stretch the background
2 min read
CSS scale() Function
The scale() function is an inbuilt function which is used to resize the element in 2D plane. It scales the elements in horizontal and vertical directions. Syntax: scale( sx ) or scale( sx, sy ) Parameters: sx: It resizes the elements in horizontal plane.sy: It resizes the elements in vertical plane. If value of sy is not defined then the resize the
1 min read
Primer CSS Scale in Animation
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, an
2 min read
Primer CSS Typography Type scale Utilities
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, an
2 min read
Primer CSS Typography Type Scale
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by object-oriented CSS principles, functional CSS, an
2 min read
Primer CSS Extended Spacing Scale
Primer CSS is a free open-source CSS framework built on technologies that provide insights into key design elements like space, typeface, and color. This methodical approach guarantees that the patterns are both consistent and compatible. It's primarily useful and adaptable. It was made with the help of the GitHub design system. Its CSS approach is
3 min read
Primer CSS Spacing Scale
Primer CSS is a free open-source CSS framework based on technologies that provide insights into important style aspects like space, font, and color. This meticulous methodology ensures that its patterns are both stable and compatible. It's mostly practical and adaptable. It was created using the GitHub design system. Object-oriented CSS foundations
3 min read
Storybook-tailwind. How should I add tailwind to storybook
In this article, we will guide you through the process of adding Tailwind CSS to Storybook to enhance your UI development. Storybook is an open-source UI that helps developers create reusable, organized UI components with proper documentation independently. Tailwind CSS is basically a utility-first CSS framework for building rapid custom UI. Prereq
2 min read