---
name: Clerk shadcn theme + Tailwind v4
description: Why Clerk's shadcn.css theme needs Tailwind optimize:false and a layer order in a Vite app
---

When wiring Clerk components to match a shadcn/ui design (via `@import "@clerk/themes/shadcn.css"`), two non-obvious settings are required in a Tailwind v4 + Vite app:

- `index.css` must declare the cascade layer order explicitly, e.g. `@layer theme, base, clerk, components, utilities;` before importing the Clerk theme, so Clerk styles land in the right layer and don't get overridden by (or override) app styles.
- `vite.config.ts` must set `tailwindcss({ optimize: false })`.

**Why:** Tailwind v4's CSS optimizer/minifier prunes the Clerk theme's selectors (it can't see Clerk's runtime-generated class usage), so with optimization on the Clerk sign-in/sign-up widgets render unstyled. Disabling optimize keeps the imported theme intact.

**How to apply:** Any artifact that themes Clerk widgets through the shadcn theme import. Symptom if missing: Clerk `<SignIn/>`/`<SignUp/>` appear unstyled or mismatched despite the import being present.