Option to have all shadcn styles to be included the global stylesheet

[dvzrd]

I noticed that with the new CLI create command, shadcnui has a stylesheet that contains some custom variants and animation keyframes (i.e. accordion). Was hoping for an option to have those added to global.css instead like with the theme tokens and other base styles instead of having a separate css import. Is that something that's planned for later?

[krishparmar22242]

This is a great question and touches on the significant architectural shift happening with the shadcn/ui CLI and Tailwind CSS v4.

The "separate CSS import" you are seeing is likely a result of the move towards a CSS-first configuration. As of late 2025, shadcn/ui has been transitioning to support Tailwind v4, which deprecates the tailwind.config.js file in favor of putting theme logic directly into your CSS files using the @theme directive.

The Current Situation

When you use the new CLI commands (especially with the new-york style or the newer Registry "Blocks"), certain components that require complex animations (like the Accordion or Navigation Menu) carry specific CSS logic.

1. tw-animate-css Migration: Shadcn has recently migrated from the tailwindcss-animate plugin to a library called tw-animate-css. This is typically imported at the top of your global.css via @import "tw-animate-css";. This is currently the standard way to handle those "base" animations without bloating your config file.

2. Modular Component Styles: For some complex components, the CLI may generate a dedicated .css file or include specific @utility or @keyframes blocks. This is part of the "Registry" architecture, which allows components to be self-contained and easier to share/copy.

While there isn't a single toggle like "inlineStyles": true in components.json yet, the Tailwind v4 roadmap for shadcn/ui is moving exactly in the direction you’re asking for. The goal is to eventually have all theme-related tokens, variants, and animations live within the @theme block of your global.css.

1. Move Keyframes to your @theme block:
If a component added a separate stylesheet with keyframes, you can move them into your global.css:

@theme inline {
  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;

  @keyframes accordion-down {
    from { height: 0; }
    to { height: var(--radix-accordion-content-height); }
  }
  @keyframes accordion-up {
    from { height: var(--radix-accordion-content-height); }
    to { height: 0; }
  }
}

2. Consolidate Imports:
If the CLI added @import "./accordion.css" inside your component or global.css, you can simply copy the contents of that file into your @layer base or @layer components section within global.css and delete the extra file.

If this explanation of the Tailwind v4 transition and the manual consolidation tip helped you clean up your styles, please consider marking this as the accepted answer!

[dvzrd]

Thanks for the info, this answers my question. I ended up moving the keyframes and custom variants into the global stylesheet. Good to know there's a config option coming to make this automatic in the future.

[krishparmar22242]

Welcome