tailwindlabs/tailwindcss · error · Error

Cannot find any CSS files that reference Tailwind CSS. Befor

Error message

Cannot find any CSS files that reference Tailwind CSS.
Before your project can be upgraded you need to create a CSS file that imports Tailwind CSS or uses ${highlight('@tailwind')}.

What it means

The upgrade tool's `linkConfigs` step needs at least one CSS file that references Tailwind (a "root stylesheet") to attach the migrated config to. It detects root stylesheets by `isTailwindRoot` (presence of an `@import "tailwindcss…"` or `@tailwind` directive). If none are found, there is nothing to link a config to and the upgrade cannot proceed.

Source

Thrown at packages/@tailwindcss-upgrade/src/codemods/css/link.ts:15

import { normalizePath } from '@tailwindcss/node'
import path from 'node:path'
import postcss from 'postcss'
import { DefaultMap } from '../../../../tailwindcss/src/utils/default-map'
import { Stylesheet } from '../../stylesheet'
import { error, highlight, relative, success } from '../../utils/renderer'
import { detectConfigPath } from '../template/prepare-config'

export async function linkConfigs(
  stylesheets: Stylesheet[],
  { configPath, base }: { configPath: string | null; base: string },
) {
  let rootStylesheets = stylesheets.filter((sheet) => sheet.isTailwindRoot)
  if (rootStylesheets.length === 0) {
    throw new Error(
      `Cannot find any CSS files that reference Tailwind CSS.\nBefore your project can be upgraded you need to create a CSS file that imports Tailwind CSS or uses ${highlight('@tailwind')}.`,
    )
  }
  let withoutAtConfig = rootStylesheets.filter((sheet) => {
    let hasConfig = false
    sheet.root.walkAtRules('config', (node) => {
      let configPath = path.resolve(path.dirname(sheet.file!), node.params.slice(1, -1))
      sheet.linkedConfigPath = configPath
      hasConfig = true
      return false
    })
    return !hasConfig
  })

  // All stylesheets have a `@config` directives
  if (withoutAtConfig.length === 0) return

  // Find the config file path for each stylesheet

View on GitHub (pinned to 16e94cbf7f)

Solutions

1. Create a CSS entry file (e.g. `src/styles.css`) containing `@import "tailwindcss";` (v4) or the v3 `@tailwind` directives, then re-run the upgrade.
2. If upgrading from v3, ensure the existing `@tailwind base/components/utilities` directives are present in a discoverable `.css` file.
3. Point the upgrade tool at the correct CSS entry if it lives in a non-default location.

Example fix

/* before: no CSS file references Tailwind */

/* after: create src/styles.css */
@import "tailwindcss";

import { readFileSync, existsSync } from 'node:fs'
function assertHasTailwindRoot(cssFiles: string[]) {
  const hasRoot = cssFiles.some(f => {
    if (!existsSync(f)) return false
    const css = readFileSync(f, 'utf8')
    return /@import\s+["']tailwindcss/.test(css) || /@tailwind\s+(base|components|utilities)/.test(css)
  })
  if (!hasRoot) throw new Error('Create a CSS file with @import "tailwindcss" before upgrading')
}

When it happens

Trigger: Running `@tailwindcss/upgrade` in a project whose CSS files have no `@tailwind base; @tailwind components; @tailwind utilities;` and no `@import "tailwindcss"`. link.ts:15 throws when `rootStylesheets.length === 0`.

Common situations: Projects that inject Tailwind purely via JS (`import 'tailwindcss/base'`), or where the main CSS is generated/hidden, or fresh projects where the entry CSS was never created.

Related errors

• No configuration file found for ${highlight(relative(start))
• Unsupported content value: ${pattern}
• You have one or more stylesheets that are imported into a ut
• Could not find the Tailwind CSS v3 `prefix` configuration in
• Tailwind CSS is not installed

AI-assisted analysis of tailwindlabs/tailwindcss@16e94cbf7f (2026-08-12). Data as JSON: /api/errors/362dd37e03084c9b. Report an issue: GitHub.