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
Collaborator

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
Collaborator

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

Uh oh!

Uh oh!

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

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 4 comments 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

hamzehparsi Feb 1, 2025

Replies: 4 comments · 1 reply

Uh oh!

hamzehparsi Feb 1, 2025 Author

Uh oh!

wongjn Feb 1, 2025 Collaborator

Uh oh!

hamzehparsi Feb 1, 2025 Author

Uh oh!

wongjn Feb 1, 2025 Collaborator

Uh oh!

hamzehparsi Feb 3, 2025 Author

hamzehparsi
Feb 1, 2025

Replies: 4 comments 1 reply

hamzehparsi
Feb 1, 2025
Author

wongjn
Feb 1, 2025
Collaborator

hamzehparsi
Feb 1, 2025
Author

wongjn
Feb 1, 2025
Collaborator

hamzehparsi Feb 3, 2025
Author