How to add scale animation on hover using Tailwind CSS in React ?

Tailwind CSS is a CSS framework that helps in building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. Tailwind CSS creates small utilities with a defined set of options enabling easy integration of existing classes directly into the HTML code.

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. 

Scale Animation Classes used in Tailwind CSS:

• Tailwind CSS Scale:This class is used to scale elements with transform on hover having values(y) i.e., 0, 50, 75, 100, 125, 150.
• Tailwind CSS Transform:This class is used to transform an element.
• Tailwind CSS Transition Property: This class is used for controlling transitions.
• Tailwind CSS Transition Duration:This class is used to control the duration of CSS transitions having values(y) ranging from 75 to 1000.

Step for Creating React Application and Installing Module:

Step 1: Create a React application using the following command:

npm create-react-app appname

Step 2: After creating your project folder i.e. folder name, move to it using the following command:

cd foldername

Step 3: After creating the React.js application, install the Tailwind CSS using the following command.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Step 4: Add Tailwind CSS directives into index.css file of the project.

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 5: Configure template paths in tailwind.config.js file using the following command:

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
}

Project Structure: It will look like the following.

 

Syntax: 

<div class="overflow-hidden">
    <img src="gfg.png" class="hover:scale-x transform transition duration-y" />
</div>

Example 1: Below example demonstrates the scaling of an <div> element on hover in React.js using Tailwind CSS. 

In the given example, we have developed a basic card component in which the user hovers over it, the card gets scaled to a size of 110.

Output:

 

Example 2: Below example demonstrates the scaling of an image on hover in React.js using Tailwind CSS. 

In the below example, we have added the scale animation on an image component on which when the user hovers over it, the image gets scaled to a size of 125, and the overflow of the image is hidden.

Output: