feat(clerk-js,types): Add experimental css layer name option

[alexcarpenter]

Description

Native CSS layers are now used in the Tailwind CSS V4, which results in TW classes having lower specificity to any styles not defined in a layer. This means the following example results in hidden not actually hiding the element via display: none;

<SignIn
  appearance={{
    elements: {
      formButtonPrimary: 'hidden',
    },
  }}
/>

To solve this, we can introduce an option that allows folks to opt clerks styles to be wrapped in a layer.

<ClerkProvider cssLayerName='components'>
  <SignIn
    appearance={{
      elements: {
        formButtonPrimary: 'hidden',
      },
    }}
  />
</ClerkProvider>

Resolves SDK-2095

Checklist

• pnpm test runs as expected.
• pnpm build runs as expected.
• (If applicable) JSDoc comments have been added or updated for any package exports
• (If applicable) Documentation has been updated

Type of change

• 🐛 Bug fix
• 🌟 New feature
• 🔨 Breaking change
• 📖 Refactoring / dependency upgrade / documentation
• other:

[changeset-bot]

🦋 Changeset detected

Latest commit: 2c23dbf

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 22 packages

Name	Type
@clerk/clerk-js	Patch
@clerk/types	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch
@clerk/agent-toolkit	Patch
@clerk/astro	Patch
@clerk/backend	Patch
@clerk/elements	Patch
@clerk/expo-passkeys	Patch
@clerk/express	Patch
@clerk/fastify	Patch
@clerk/localizations	Patch
@clerk/nextjs	Patch
@clerk/nuxt	Patch
@clerk/react-router	Patch
@clerk/clerk-react	Patch
@clerk/remix	Patch
@clerk/shared	Patch
@clerk/tanstack-react-start	Patch
@clerk/testing	Patch
@clerk/themes	Patch
@clerk/vue	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
clerk-js-sandbox	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 8, 2025 1:35pm

[alexcarpenter]

!snapshot

[clerk-cookie]

Hey @alexcarpenter - the snapshot version command generated the following package versions:

Package	Version
@clerk/agent-toolkit	0.0.19-snapshot.v20250407205111
@clerk/astro	2.6.1-snapshot.v20250407205111
@clerk/backend	1.27.1-snapshot.v20250407205111
@clerk/chrome-extension	2.2.26-snapshot.v20250407205111
@clerk/clerk-js	5.59.2-snapshot.v20250407205111
@clerk/elements	0.23.11-snapshot.v20250407205111
@clerk/clerk-expo	2.9.9-snapshot.v20250407205111
@clerk/expo-passkeys	0.2.3-snapshot.v20250407205111
@clerk/express	1.4.2-snapshot.v20250407205111
@clerk/fastify	2.2.2-snapshot.v20250407205111
@clerk/localizations	3.13.7-snapshot.v20250407205111
@clerk/nextjs	6.14.1-snapshot.v20250407205111
@clerk/nuxt	1.5.2-snapshot.v20250407205111
@clerk/clerk-react	5.26.1-snapshot.v20250407205111
@clerk/react-router	1.2.2-snapshot.v20250407205111
@clerk/remix	4.5.14-snapshot.v20250407205111
@clerk/shared	3.4.1-snapshot.v20250407205111
@clerk/tanstack-react-start	0.13.2-snapshot.v20250407205111
@clerk/testing	1.4.36-snapshot.v20250407205111
@clerk/themes	2.2.29-snapshot.v20250407205111
@clerk/types	4.51.1-snapshot.v20250407205111
@clerk/vue	1.5.1-snapshot.v20250407205111

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/[email protected] --save-exact

@clerk/astro

npm i @clerk/[email protected] --save-exact

@clerk/backend

npm i @clerk/[email protected] --save-exact

@clerk/chrome-extension

npm i @clerk/[email protected] --save-exact

@clerk/clerk-js

npm i @clerk/[email protected] --save-exact

@clerk/elements

npm i @clerk/[email protected] --save-exact

@clerk/clerk-expo

npm i @clerk/[email protected] --save-exact

@clerk/expo-passkeys

npm i @clerk/[email protected] --save-exact

@clerk/express

npm i @clerk/[email protected] --save-exact

@clerk/fastify

npm i @clerk/[email protected] --save-exact

@clerk/localizations

npm i @clerk/[email protected] --save-exact

@clerk/nextjs

npm i @clerk/[email protected] --save-exact

@clerk/nuxt

npm i @clerk/[email protected] --save-exact

@clerk/clerk-react

npm i @clerk/[email protected] --save-exact

@clerk/react-router

npm i @clerk/[email protected] --save-exact

@clerk/remix

npm i @clerk/[email protected] --save-exact

@clerk/shared

npm i @clerk/[email protected] --save-exact

@clerk/tanstack-react-start

npm i @clerk/[email protected] --save-exact

@clerk/testing

npm i @clerk/[email protected] --save-exact

@clerk/themes

npm i @clerk/[email protected] --save-exact

@clerk/types

npm i @clerk/[email protected] --save-exact

@clerk/vue

npm i @clerk/[email protected] --save-exact

[alexcarpenter]

!snapshot

[clerk-cookie]

Hey @alexcarpenter - the snapshot version command generated the following package versions:

Package	Version
@clerk/agent-toolkit	0.0.19-snapshot.v20250407220002
@clerk/astro	2.6.1-snapshot.v20250407220002
@clerk/backend	1.27.1-snapshot.v20250407220002
@clerk/chrome-extension	2.2.26-snapshot.v20250407220002
@clerk/clerk-js	5.59.2-snapshot.v20250407220002
@clerk/elements	0.23.11-snapshot.v20250407220002
@clerk/clerk-expo	2.9.9-snapshot.v20250407220002
@clerk/expo-passkeys	0.2.3-snapshot.v20250407220002
@clerk/express	1.4.2-snapshot.v20250407220002
@clerk/fastify	2.2.2-snapshot.v20250407220002
@clerk/localizations	3.13.7-snapshot.v20250407220002
@clerk/nextjs	6.14.1-snapshot.v20250407220002
@clerk/nuxt	1.5.2-snapshot.v20250407220002
@clerk/clerk-react	5.26.1-snapshot.v20250407220002
@clerk/react-router	1.2.2-snapshot.v20250407220002
@clerk/remix	4.5.14-snapshot.v20250407220002
@clerk/shared	3.4.1-snapshot.v20250407220002
@clerk/tanstack-react-start	0.13.2-snapshot.v20250407220002
@clerk/testing	1.4.36-snapshot.v20250407220002
@clerk/themes	2.2.29-snapshot.v20250407220002
@clerk/types	4.51.1-snapshot.v20250407220002
@clerk/vue	1.5.1-snapshot.v20250407220002

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/[email protected] --save-exact

@clerk/astro

npm i @clerk/[email protected] --save-exact

@clerk/backend

npm i @clerk/[email protected] --save-exact

@clerk/chrome-extension

npm i @clerk/[email protected] --save-exact

@clerk/clerk-js

npm i @clerk/[email protected] --save-exact

@clerk/elements

npm i @clerk/[email protected] --save-exact

@clerk/clerk-expo

npm i @clerk/[email protected] --save-exact

@clerk/expo-passkeys

npm i @clerk/[email protected] --save-exact

@clerk/express

npm i @clerk/[email protected] --save-exact

@clerk/fastify

npm i @clerk/[email protected] --save-exact

@clerk/localizations

npm i @clerk/[email protected] --save-exact

@clerk/nextjs

npm i @clerk/[email protected] --save-exact

@clerk/nuxt

npm i @clerk/[email protected] --save-exact

@clerk/clerk-react

npm i @clerk/[email protected] --save-exact

@clerk/react-router

npm i @clerk/[email protected] --save-exact

@clerk/remix

npm i @clerk/[email protected] --save-exact

@clerk/shared

npm i @clerk/[email protected] --save-exact

@clerk/tanstack-react-start

npm i @clerk/[email protected] --save-exact

@clerk/testing

npm i @clerk/[email protected] --save-exact

@clerk/themes

npm i @clerk/[email protected] --save-exact

@clerk/types

npm i @clerk/[email protected] --save-exact

@clerk/vue

npm i @clerk/[email protected] --save-exact