tailwind-v4-shadcn

Setting up Tailwind v4 with shadcn/ui in a Turborepo requires configuring shared `packages/tailwind-config` and `packages/ui` directories. You must establish PostCSS configurations, CSS tokens, and a `components.json` file for aliasing to ensure consistent styling across all monorepo applications.

Tailwind v4 breaking changes impact shadcn/ui integration by requiring migration to the new `@theme inline` CSS format, adoption of OKLCH colors, and updates to utility classes. Configuring shared package structures correctly ensures these styling updates propagate across your monorepo applications.

Yes, you can use monorepo-aware shadcn/ui CLI commands to add components directly to a shared package. By properly configuring your `components.json` file with the correct path aliases, the CLI targets your `packages/ui` directory, making components available across all apps.

Tailwind CSS v4 works seamlessly with Next.js and Turborepo for shared UI components by utilizing a shared `packages/tailwind-config` and `packages/ui` structure. This architecture ensures that individual apps consume consistent styling tokens and component libraries without configuration duplication.

shadcn/ui styling breaks after upgrading to Tailwind CSS v4 because of breaking changes from Tailwind v3, primarily involving the new `@theme inline` CSS format and OKLCH color definitions. Updating your shared CSS token configuration and utility classes resolves these rendering issues.