How To Change The Width On Hover Using Tailwind CSS ?
May 28, 2022
Answers (2)
Add Answer
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.
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
width: ["responsive", "hover", "focus"]
},
plugins: [],
}
<!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>
variants: {
width: ["responsive", "hover", "focus"]
}
edit tailwind.config.js, and then rebuild the tailwind CSS file After that, hovering over items will allow you to adjust their width.
