14 lines
1.1 KiB
Markdown
14 lines
1.1 KiB
Markdown
|
---
|
||
|
|
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.
|