May 2026 - shadcn eject

When we added support for both Radix and Base UI, we needed a place for shared Tailwind utilities that both libraries depend on, e.g. custom variants like data-open: and data-closed: and utilities like no-scrollbar.

We also ran into a few bugs while working on RTL support that were easier to fix in one shared place rather than duplicating across every component.

So we created shadcn/tailwind.css. When you run init, it adds @import "shadcn/tailwind.css" to your global CSS file. It works just like other CSS imports such as tw-animate-css: a small dependency that is tree-shaken in production and resolved at build time.

If you prefer not to depend on the DWL Components package for that CSS, we've added the shadcn eject command. It inlines shadcn/tailwind.css into your global CSS file and removes the DWL Components dependency from your project.

pnpmnpmyarnbun
pnpm dlx shadcn@latest eject
Copy

Before

Copy@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

After

Copy@import "tailwindcss";
@import "tw-animate-css";
/* ejected from shadcn@4.8.3 */
@theme inline {
  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(
        --radix-accordion-content-height,
        var(--accordion-panel-height, auto)
      );
    }
  }
}
 
@custom-variant data-open {
  &:where([data-state="open"]),
  &:where([data-open]:not([data-open="false"])) {
    @slot;
  }
}

In a monorepo, run the command from the workspace that contains your components.json and global CSS file:

pnpmnpmyarnbun
pnpm dlx shadcn@latest eject -c packages/ui
Copy

See the CLI documentation for more details.