skillguard/.agents/memory/clerk-shadcn-theme-tailwind.md

name	description
Clerk shadcn theme + Tailwind v4	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.