shadcn-ui/ui · error · Error

We could not find a valid CSS file in your `components.json`

Error message

We could not find a valid CSS file in your `components.json` file. Please ensure you have a valid `tailwind.css` path in your `components.json` file.

What it means

First guard inside migrateBaseColor (backs `shadcn migrate base-color`). The migration rewrites theme CSS variables inside the stylesheet resolved from components.json's tailwind.css entry. If config.resolvedPaths.tailwindCss is falsy — the entry is missing, empty, or does not resolve to a real file — there is no stylesheet to migrate, so it throws before doing anything.

Source

Thrown at packages/shadcn/src/migrations/migrate-base-color.ts:39

import { z } from "zod"

type CssVars = z.infer<typeof registryItemCssVarsSchema>

export interface SkippedToken {
  token: string
  reason: string
}

export async function migrateBaseColor(
  config: Config,
  options: {
    from?: string
    to?: string
    yes?: boolean
  } = {}
) {
  if (!config.resolvedPaths.tailwindCss) {
    throw new Error(
      "We could not find a valid CSS file in your `components.json` file. Please ensure you have a valid `tailwind.css` path in your `components.json` file."
    )
  }

  if (!config.tailwind.cssVariables) {
    throw new Error(
      "The `base-color` migration requires CSS variables. Your `components.json` has `cssVariables: false`, which uses inline Tailwind color classes instead of theme variables."
    )
  }

  const baseColorChoices = BASE_COLORS.map((baseColor) => ({
    title: baseColor.label,
    value: baseColor.name,
  }))
  const baseColorNames: string[] = BASE_COLORS.map(
    (baseColor) => baseColor.name
  )

View on GitHub (pinned to c06da1d0e9)

Solutions

1. Open components.json and fix the `tailwind.css` alias so it points at the existing stylesheet that holds your :root/.dark variables, then re-run the migration.
2. Verify the file exists: the path in components.json must resolve relative to the project root — check for typos, wrong casing, or a stale ~/ prefix.
3. If you moved the stylesheet intentionally, run `shadcn init` again (or update the alias) so resolvedPaths.tailwindCss resolves.

Example fix

// before — components.json
{
  "tailwind": {
    "config": "",
    "css": "~/src/app/globals.css",   // file was renamed to theme.css
    "baseColor": "neutral",
    "cssVariables": true
  }
}

// after
{
  "tailwind": {
    "config": "",
    "css": "~/src/app/theme.css",
    "baseColor": "neutral",
    "cssVariables": true
  }
}

import { existsSync } from 'fs'
import { get_config } from '@/src/utils/get-config' // or read components.json yourself

// Before running `shadcn migrate base-color`:
const raw = require('./components.json')
const cssAlias = raw.tailwind?.css
const cssPath = cssAlias?.replace(/^~?//, '')
if (!cssAlias || !cssPath || !existsSync(path.resolve(process.cwd(), cssPath))) {
  console.error('Fix tailwind.css in components.json before migrating.')
  process.exit(1)
}

When it happens

Trigger: Running `npx shadcn@latest migrate base-color` when components.json has no `tailwind.css` key under `tailwind.aliases`, or the configured path (e.g. "~/src/app/globals.css" or "./src/index.css") points at a file that was renamed, moved, or never existed.

Common situations: Renaming globals.css after init (e.g. to theme.css) without updating components.json; hand-editing components.json and introducing a path typo; monorepos where the CSS file lives outside the cwd the config was created for; projects scaffolded by tools that emit a nonstandard layout.

Related errors

• Invalid input: not an object literal
• The `base-color` migration requires CSS variables. Your `com
• Failed to read config at ${options.cwd}.
• We could not find a valid `ui` path in your `components.json
• The provided cwd must match config.resolvedPaths.cwd.

AI-assisted analysis of shadcn-ui/ui@c06da1d0e9 (2026-08-21). Data as JSON: /api/errors/f2e8f52ba27a8fea. Report an issue: GitHub.