group-hover:translate-y-6 translate-y-0 #16158

hamzehparsi · 2025-02-01T07:40:49Z

hamzehparsi
Feb 1, 2025

"@tailwindcss/vite": "^4.0.2",
"tailwindcss": "^4.0.2"

`

Production

product menu
Develop

product menu

` When I hover over the menu, the following effect does not occur. group-hover:translate-y-6 translate-y-0

hamzehparsi · 2025-02-01T07:41:31Z

hamzehparsi
Feb 1, 2025
Author

<ul class="flex space-x-6 items-center"> <li class="relative group"> <button>Production</button> <div class="absolute transform text-slate-400 left-0 top-0 opacity-0 group-hover:opacity-100 invisible group-hover:mt-4 mt-0 group-hover:visible transition-all ease-in-out duration-300" > <div class="relative w-[480px] rounded-xl top-6 p-6 bg-white shadow-2xl" > <div class="w-6 h-6 bg-white rotate-45 translate-0 absolute left-5 -top-0 -z-10" ></div> <div>product menu</div> </div> </div> </li> <li class="relative group"> <button>Develop</button> <div class="absolute transform text-slate-400 left-0 top-0 opacity-0 group-hover:opacity-100 group-hover:translate-y-6 translate-y-0 transition-all ease-in-out duration-300" > <div class="relative w-[280px] rounded-xl top-6 p-6 bg-white shadow-2xl" > <div class="w-6 h-6 bg-white rotate-45 translate-0 absolute left-5 -top-0 -z-10" ></div> <div>product menu</div> </div> </div> </li> </ul>

0 replies

wongjn · 2025-02-01T09:20:30Z

wongjn
Feb 1, 2025

Seems to be working in this Tailwind Play which would suggest the unexpected behavior is something particular to your project. Consider providing a reproducible example.

0 replies

hamzehparsi · 2025-02-01T13:00:06Z

hamzehparsi
Feb 1, 2025
Author

"The problem is that when I use the installed internal Tailwind package, there is an execution issue, and this
group-hover:translate-y-6
doesn’t work, but when I use
remove <link rel="stylesheet" href="/src/style.css" />
,
replace by
<script src="https://cdn.tailwindcss.com"></script>

it works correctly."

0 replies

wongjn · 2025-02-01T13:39:35Z

wongjn
Feb 1, 2025

Could you provide more details about the execution issue please? Consider providing a reproducible example.

1 reply

hamzehparsi Feb 3, 2025
Author

install by npm install tailwindcss @tailwindcss/cli
{ "dependencies": { "@tailwindcss/cli": "^4.0.3", "tailwindcss": "^4.0.3" } }

code is
`<!doctype html>

    <li class="group relative">
      <button>Develop</button>
      <div class="absolute top-0 left-0 translate-y-0 transform text-slate-400 opacity-0 transition-all duration-300 ease-in-out group-hover:translate-y-6 group-hover:opacity-100">
        <div class="relative top-6 w-[280px] rounded-xl bg-white p-6 shadow-2xl">
          <div class="absolute -top-0 left-5 -z-10 h-6 w-6 translate-0 rotate-45 bg-white"></div>
          <div>product menu</div>
        </div>
      </div>
    </li>
  </ul>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

group-hover:translate-y-6 translate-y-0 #16158

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 4 comments 1 reply

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

group-hover:translate-y-6 translate-y-0 #16158

hamzehparsi Feb 1, 2025

Replies: 4 comments · 1 reply

hamzehparsi Feb 1, 2025 Author

wongjn Feb 1, 2025

hamzehparsi Feb 1, 2025 Author

wongjn Feb 1, 2025

hamzehparsi Feb 3, 2025 Author

hamzehparsi
Feb 1, 2025

Replies: 4 comments 1 reply

hamzehparsi
Feb 1, 2025
Author

wongjn
Feb 1, 2025

hamzehparsi
Feb 1, 2025
Author

wongjn
Feb 1, 2025

hamzehparsi Feb 3, 2025
Author