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
variants: {
width: ["responsive", "hover", "focus"],
height: ["responsive", "hover", "focus"]
},
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
hover:h-20 bg-green-200 text-center">
<div>HOVER HERE</div>
</div>
</body>
</html>
Output:
Similar Reads
How to Change Image on Hover using Tailwind CSS?
One common effect is changing an image when the user hovers over it. We use Tailwind CSS, a utility-first CSS framework, to accomplish this without any additional JavaScript logic for the hover effect. By utilizing Tailwind's built-in classes we can create smooth transitions between two images where
2 min read
How to Create Group Hover on Text using Tailwind CSS?
Creating a group hover effect on text with Tailwind CSS involves styling text to change its appearance when hovering over a parent container. This method allows multiple elements to respond to a single hover action, enhancing interactivity and creating cohesive UI designs. Using utility classes in T
2 min read
How to Change Image Opacity on Hover using CSS ?
Changing the opacity of an image on hover can add a more elegant and interactive effect to your website. This simple yet effective technique can be implemented using CSS. When a user hovers over an image, it gradually becomes more transparent, pointing out the interaction and creating an attractive
2 min read
How to Change the Color of Link on Hover using CSS ?
Changing the color of a link on hover can provide visual feedback to users, indicating that the link is interactive. It improves the user experience by helping users understand that the link is clickable. These are the following approaches: Table of Content Using CSS pseudo-classUsing CSS VariablesU
2 min read
How to Change the Underline Color in Tailwind CSS ?
The Tailwind underline class adds an underline to the text, and the decoration-color class changes the color of the text-decoration property. Both classes can be used together to add an underline and color to the text. Syntax: The syntax for the tailwind underline and decoration-color classes is as
3 min read
How to write a:hover in inline CSS?
The :hover pseudo-selector in CSS enables you to modify the style of elements when a user hovers their mouse over them. This selector is widely used to improve user experience by adding visual feedback on elements like buttons, links, images, or any interactive items on a webpage. For the :hover eff
2 min read
How to Change the Stroke Width of an SVG Element in Tailwind CSS?
Stroke Width of an SVG Element is a key property that defines the thickness of the outline for shapes like circles, rectangles, and paths. In Tailwind CSS, adjusting the stroke width is simple and can be done using utility classes. Tailwind provides a range of built-in classes, along with the flexib
3 min read
How to Modify Hover Effect using Tailwind CSS ?
In Tailwind CSS, the term "modify hover" refers to changing the styles that are applied to an element when it is hovered over. With Tailwind CSS "hover" variation, you can quickly apply particular utility classes and custom classes to control how components appear when you hover over them, giving yo
3 min read
How to Change Style of Scrollbar using Tailwind CSS ?
By default, Tailwind CSS does not include built-in utilities for styling scrollbars. However, you can customize the appearance of scrollbars using traditional CSS in combination with Tailwind's utility classes. This is achieved by using the scrollbar-* classes to customize aspects like scrollbar wid
3 min read
How to Create Multiple Themes using Tailwind CSS ?
In this article, we will discuss how to create multiple themes using Tailwind CSS. Tailwind CSS is a popular utility-first CSS framework that provides a lot of pre-designed CSS classes for designing websites. With Tailwind CSS, you can easily create multiple themes for your website. This means that
3 min read