{"record":{"id":"56b88a3fe00243dc","repo":"tailwindlabs/tailwindcss","slug":"the-browser-build-does-not-support-import-for","errorCode":null,"errorMessage":"The browser build does not support @import for \"${id}\"","messagePattern":"The browser build does not support @import for \"(.+?)\"","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/@tailwindcss-browser/src/index.ts","lineNumber":149,"sourceCode":"    ) {\n      return {\n        path: 'virtual:tailwindcss/theme.css',\n        base,\n        content: assets.css.theme,\n      }\n    } else if (\n      id === 'tailwindcss/utilities' ||\n      id === 'tailwindcss/utilities.css' ||\n      id === './utilities.css'\n    ) {\n      return {\n        path: 'virtual:tailwindcss/utilities.css',\n        base,\n        content: assets.css.utilities,\n      }\n    }\n\n    throw new Error(`The browser build does not support @import for \"${id}\"`)\n  }\n\n  try {\n    let sheet = load()\n\n    I.hit(`Loaded stylesheet`, {\n      id,\n      base,\n      size: sheet.content.length,\n    })\n\n    return sheet\n  } catch (err) {\n    I.hit(`Failed to load stylesheet`, {\n      id,\n      base,\n      error: (err as Error).message ?? err,\n    })","sourceCodeStart":131,"sourceCodeEnd":167,"githubUrl":"https://github.com/tailwindlabs/tailwindcss/blob/16e94cbf7f965c5ad697e90e940b5e178efad67c/packages/@tailwindcss-browser/src/index.ts#L131-L167","documentation":"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`.","triggerScenarios":"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.","commonSituations":"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`.","solutions":["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.","Verify the id exactly matches one of: `tailwindcss`, `tailwindcss/preflight`, `tailwindcss/theme`, `tailwindcss/utilities` (with optional `.css` / `./` prefix).","If you need arbitrary CSS resolution, use the Node build (`@tailwindcss/node`) which has a real `loadStylesheet` that reads from disk."],"exampleFix":"/* before */\n@import \"tailwindcss\";\n@import \"./components/buttons.css\";\n\n/* after */\n@import \"tailwindcss\";\n/* inline or pre-concatenate components/buttons.css into the input string */","handlingStrategy":"validation","validationCode":"const BROWSER_IMPORTS = new Set([\n  'tailwindcss',\n  'tailwindcss/preflight', 'tailwindcss/preflight.css', './preflight.css',\n  'tailwindcss/theme', 'tailwindcss/theme.css', './theme.css',\n  'tailwindcss/utilities', 'tailwindcss/utilities.css', './utilities.css',\n])\nfunction assertBrowserImports(css: string) {\n  for (const m of css.matchAll(/@import\\s+[\"']([^\"']+)[\"']/g)) {\n    if (!BROWSER_IMPORTS.has(m[1])) {\n      throw new Error(`Unsupported browser @import: ${m[1]}`)\n    }\n  }\n}","typeGuard":"function isSupportedBrowserImport(id: string): boolean {\n  return new Set([\n    'tailwindcss',\n    'tailwindcss/preflight', 'tailwindcss/preflight.css', './preflight.css',\n    'tailwindcss/theme', 'tailwindcss/theme.css', './theme.css',\n    'tailwindcss/utilities', 'tailwindcss/utilities.css', './utilities.css',\n  ]).has(id)\n}","tryCatchPattern":null,"preventionTips":["Pre-validate the CSS string against the supported import set before calling compile in the browser build.","Keep custom CSS partials out of browser-compiled stylesheets; bundle them upstream.","Treat @tailwindcss/browser as supporting only the four canonical Tailwind imports."],"tags":["browser-build","css-import","filesystem"],"backgroundTag":null,"analyzedSha":"16e94cbf7f965c5ad697e90e940b5e178efad67c","analyzedAt":"2026-08-12T06:02:42.469Z","schemaVersion":2},"datasetVersion":"2026-08-12T13:17:24.610Z"}