tailwindlabs/tailwindcss · error · Error

The browser build does not support @import for "${id}"

Error message

The browser build does not support @import for "${id}"

What it means

The browser build of Tailwind CSS ships a fixed set of CSS bundled in memory (`assets.css.*`) and only resolves four well-known @import specifiers: `tailwindcss`, `tailwindcss/preflight[.css]`, `tailwindcss/theme[.css]`, and `tailwindcss/utilities[.css]` (plus their `./` siblings). Any other @import id has no backing asset and cannot be loaded, because the browser build has no filesystem access to read arbitrary files. The error is thrown in the `loadStylesheet` callback wired into `tailwindcss.compile`.

Source

Thrown at packages/@tailwindcss-browser/src/index.ts:149

    ) {
      return {
        path: 'virtual:tailwindcss/theme.css',
        base,
        content: assets.css.theme,
      }
    } else if (
      id === 'tailwindcss/utilities' ||
      id === 'tailwindcss/utilities.css' ||
      id === './utilities.css'
    ) {
      return {
        path: 'virtual:tailwindcss/utilities.css',
        base,
        content: assets.css.utilities,
      }
    }

    throw new Error(`The browser build does not support @import for "${id}"`)
  }

  try {
    let sheet = load()

    I.hit(`Loaded stylesheet`, {
      id,
      base,
      size: sheet.content.length,
    })

    return sheet
  } catch (err) {
    I.hit(`Failed to load stylesheet`, {
      id,
      base,
      error: (err as Error).message ?? err,
    })

View on GitHub (pinned to 16e94cbf7f)

Solutions

1. Remove the unsupported @import from the CSS and inline the necessary rules, or pre-bundle the imported CSS before handing the string to the browser build.
2. Verify the id exactly matches one of: `tailwindcss`, `tailwindcss/preflight`, `tailwindcss/theme`, `tailwindcss/utilities` (with optional `.css` / `./` prefix).
3. If you need arbitrary CSS resolution, use the Node build (`@tailwindcss/node`) which has a real `loadStylesheet` that reads from disk.

Example fix

/* before */
@import "tailwindcss";
@import "./components/buttons.css";

/* after */
@import "tailwindcss";
/* inline or pre-concatenate components/buttons.css into the input string */

const BROWSER_IMPORTS = new Set([
  'tailwindcss',
  'tailwindcss/preflight', 'tailwindcss/preflight.css', './preflight.css',
  'tailwindcss/theme', 'tailwindcss/theme.css', './theme.css',
  'tailwindcss/utilities', 'tailwindcss/utilities.css', './utilities.css',
])
function assertBrowserImports(css: string) {
  for (const m of css.matchAll(/@import\s+["']([^"']+)["']/g)) {
    if (!BROWSER_IMPORTS.has(m[1])) {
      throw new Error(`Unsupported browser @import: ${m[1]}`)
    }
  }
}

function isSupportedBrowserImport(id: string): boolean {
  return new Set([
    'tailwindcss',
    'tailwindcss/preflight', 'tailwindcss/preflight.css', './preflight.css',
    'tailwindcss/theme', 'tailwindcss/theme.css', './theme.css',
    'tailwindcss/utilities', 'tailwindcss/utilities.css', './utilities.css',
  ]).has(id)
}

When it happens

Trigger: A CSS file passed to the browser build contains `@import "./my-styles.css"`, `@import "tailwindcss/anything-else"`, or any specifier outside the four supported buckets. The `load()` helper exhausts its if/else chain and throws at index.ts:149.

Common situations: Porting a Node/CLI stylesheet that imports custom CSS partials, or importing a third-party CSS file (`@import "normalize.css"`) into a stylesheet compiled with `@tailwindcss/browser`. Also happens with bare-specifier typos like `tailwindcss/utilitiess`.

Related errors

• The browser build does not support plugins or config files.
• The `source(${compiler.root.pattern})` does not exist or is
• 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

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