Shadcn/ui components clipped & misaligned in Next.js Turbopack + Tailwind v4 #7321

Unanswered

ajithberlin asked this question in Q&A

ajithberlin
May 2, 2025

Screenshot 2025-05-02 at 10 34 46 PM

Screenshot 2025-05-02 at 10 34 52 PM

Screenshot 2025-05-02 at 10 35 13 PM

Environment:

Next.js (Turbopack) monorepo
Tailwind CSS v4 (globals.css only has @import "tailwindcss";)
shadcn/ui (latest)

Issue:
Buttons, dropdowns and cards render incorrectly—half-height buttons, dropdowns under other elements, clipped edges.

Steps to Reproduce:

Create a Turbopack Next.js app.
Install Tailwind v4 + shadcn/ui.
Use only @import "tailwindcss"; in globals.css.
Render any <Button> or <DropdownMenu>.

Replies: 0 comments

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment