tailwindlabs/tailwindcss · error · Error

The `source(${compiler.root.pattern})` does not exist or is

Error message

The `source(${compiler.root.pattern})` does not exist or is not a directory.

What it means

After compiling, `@tailwindcss/node` verifies that the directory portion of a `source(…)` pattern (everything before the first glob symbol) actually exists on disk and is a directory. This catches misconfigured source roots early, before the scanner silently matches zero files. The check walks path segments up to the first `/`, stops at a glob character (`*` or `{`), and stats the accumulated base.

Source

Thrown at packages/@tailwindcss-node/src/compile.ts:87

  // Verify if the `source(…)` path exists (until the glob pattern starts)
  if (compiler.root && compiler.root !== 'none') {
    let globSymbols = /[*{]/
    let basePath = []
    for (let segment of compiler.root.pattern.split('/')) {
      if (globSymbols.test(segment)) {
        break
      }

      basePath.push(segment)
    }

    let exists = await fsPromises
      .stat(path.resolve(compiler.root.base, basePath.join('/')))
      .then((stat) => stat.isDirectory())
      .catch(() => false)

    if (!exists) {
      throw new Error(
        `The \`source(${compiler.root.pattern})\` does not exist or is not a directory.`,
      )
    }
  }
}

export async function compileAst(ast: AstNode[], options: CompileOptions) {
  let compiler = await _compileAst(ast, createCompileOptions(options))
  await ensureSourceDetectionRootExists(compiler)
  return compiler
}

export async function compile(css: string, options: CompileOptions) {
  let compiler = await _compile(css, createCompileOptions(options))
  await ensureSourceDetectionRootExists(compiler)
  return compiler
}

View on GitHub (pinned to 16e94cbf7f)

Solutions

1. Confirm the directory in the `source(…)` path exists relative to the CSS file or configured base; create it or correct the typo.
2. If the directory is generated by a build step, ensure that build runs before Tailwind, or point `source(…)` at a directory that always exists.
3. Move glob-only patterns so the literal prefix segment is a real directory.

Example fix

/* before */
@source "../src/componenets/**/*.tsx";

/* after */
@source "../src/components/**/*.tsx";

import { stat } from 'node:fs/promises'
async function assertSourceRootExists(pattern: string, base: string) {
  const literal = pattern.split('/').find(seg => !/[*{]/.test(seg)) ?? pattern
  const dir = path.resolve(base, literal.split('/').slice(0, -1).join('/') || literal)
  const ok = await stat(dir).then(s => s.isDirectory()).catch(() => false)
  if (!ok) throw new Error(`source(${pattern}) base dir missing: ${dir}`)
}

try {
  await compileAst(ast, options)
} catch (e) {
  if (/source\(.*\) does not exist/.test((e as Error).message)) {
    // create dir or fix @source, then retry
  }
  throw e
}

When it happens

Trigger: `source("./src/nonexistent")` or `source("src/typo/**")` where the leading directory does not exist. `ensureSourceDetectionRootExists` stats `path.resolve(root.base, basePath)` and throws at compile.ts:87 when it is missing or not a directory.

Common situations: Renaming/moving a source directory without updating `@source`, wrong working directory (so `base` resolves relative to the wrong place), or a fresh checkout where generated dirs (e.g. `dist/`) have not been built yet.

Related errors

• The path given to `source(…)` must be a directory but got `s
• The path given to `source(…)` must be a directory but got `s
• The path given to `source(…)` must be a directory but got `s
• The browser build does not support @import for "${id}"
• The browser build does not support plugins or config files.

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