Jun 17

Tailwind CSS v4 support

Category: Product
Published: Jun 17

Introducing the cssLayerName option for compatibility with Tailwind CSS v4, allowing Clerk styles to be wrapped in a dedicated CSS cascade layer.

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

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

layout.tsx

import { ClerkProvider } from '@clerk/nextjs'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <ClerkProvider
      appearance={{
        cssLayerName: 'clerk',
      }}
    >
      <html lang="en">
        <body>{children}</body>
      </html>
    </ClerkProvider>
  )
}

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:
```
@layer theme, base, clerk, components, utilities;
@import 'tailwindcss';
```
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.