tailwindlabs/tailwindcss · error · Error

Cannot find any CSS files that reference Tailwind…

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.

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
• Could not find the Tailwind CSS v3 `prefix` configuration…
• Tailwind CSS is not installed
• Unsupported content value
• You have one or more stylesheets that are imported into a…

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

Appendix: 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)