To ensure compatibility with Tailwind CSS v4 and its use of native CSS layers, and to provide more granular control over CSS specificity, Clerk now accepts a new cssLayerName option. This new option allows Clerk's component styles to be integrated into the native CSS layering system. When you provide a layer name, Clerk will automatically wrap all of its styles within that CSS layer.

How to use

1. Add the cssLayerName prop to the appearance object of your ClerkProvider or Clerk options config, depending on your framework.

2. After specifying the cssLayerName option, you then need to specify the CSS layer order in your global stylesheet. This ensures that the layer you assigned to Clerk (e.g., "clerk") is correctly sequenced with Tailwind's layers and your custom styles:

   This configuration ensures that Clerk styles are part of the cascade in a predictable way, playing nicely with Tailwind CSS v4's architecture and allowing you to utilize Tailwind's utility classes within Clerk's appearance object.