How to change the width on hover using Tailwind CSS ?

Last Updated : 24 Jul, 2024

In this article, we will change the width on hover using Tailwind. There is no inbuilt method in Tailwind, so you have to customize the tailwind.config.js file. Let's discuss the whole process further in this article.

By default, tailwind CSS only generates responsive variants for width utilities. To modify width on hover, you need to modify tailwind.config.js file. The below step is to add the tailwind.config.js file in your project folder in order to work on hover to change the width.

First, you have to install the Tailwind CSS. Given below are the steps to install tailwind CSS.

Prerequisite: Follow the below step to add your own utility class to the tailwind.

Step 1: Run the below code to your folder's terminal. This will create package.json file.

npm init

Step 2: Copy and paste the below code to your folder's terminal. This will create the required node module for tailwind.

npm install tailwindcss@latest postcss@latest autoprefixer@latest

Step 3: Create a public folder and add index.html, style.css, and tailwind.css inside the public folder.

Step 4: Add the below code in the tailwind.css file. Using this file, you can customize your tailwind CSS along with the default style. Tailwind will swap these directives out at build-time with all the styles. It generates based on your configured design system.

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

Step 5: open package.json file and under script tag add below code

"scripts": {
   "build:css": "tailwind build public/tailwind.css -o public/style.css"
 },

Step 6: Run the below code in the terminal. This will populate your style.css file with predefined Tailwind CSS code.

npm run build:css

Step 7: Finally, run the below code. This will Generate a Tailwind config file for your project using the Tailwind CLI utility included when you install the tailwindcss npm package:

npx tailwindcss init

Syntax:

variants: {
    width: ["responsive", "hover", "focus"]
}

tailwind.config.js: The following code is the content for the tailwind config file. We simply want to extend the config to add new values.

JavaScript

module.exports = {
    purge: [],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    
    variants: {
        width: ["responsive", "hover", "focus"]
    },
    
    plugins: [],
}

Example 1:

HTML

<!DOCTYPE html>
<html class="dark">

<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
        rel="stylesheet">
</head>

<body>
    <div class=" w-1/3 hover:w-4/5 bg-green-200 ">
        <div>HOVER HERE</div>
    </div>
</body>

</html>

Output:

Example 2: Again on hover, for changing both height and width, you have to add or modify the below code on tailwind.config.js