tailwindlabs/tailwindcss · error · Error

`layer(…)` in an `@import` should come before any other func

Error message

`layer(…)` in an `@import` should come before any other functions or conditions

What it means

Thrown while parsing the conditional tokens of an `@import` statement. The `layer(...)` function must appear before `supports(...)` (and before media queries); if a `layer(...)` token is encountered after `supports` is already set, the parser rejects it. This enforces the CSS-import grammar ordering.

Source

Thrown at packages/tailwindcss/src/at-import.ts:125

      // `@import` with `url(…)` functions are not inlined but skipped and kept
      // in the final CSS instead.
      // E.g.: `@import url("https://fonts.google.com")`
      return null
    }

    if (!uri) return null

    if (
      (node.kind === 'word' || node.kind === 'function') &&
      node.value.toLowerCase() === 'layer'
    ) {
      if (layer) return null
      if (supports) {
        throw new Error(
          '`layer(…)` in an `@import` should come before any other functions or conditions',
        )
      }

      if ('nodes' in node) {
        layer = ValueParser.toCss(node.nodes)
      } else {
        layer = ''
      }

      continue
    }

    if (node.kind === 'function' && node.value.toLowerCase() === 'supports') {
      if (supports) return null
      supports = ValueParser.toCss(node.nodes)
      continue
    }

    media = ValueParser.toCss(params.slice(i))
    break
  }

View on GitHub (pinned to 16e94cbf7f)

Solutions

1. Move `layer(...)` before `supports(...)`: `@import "x.css" layer(base) supports(display: grid);`.
2. If you do not need explicit layering, drop the `layer(...)` clause entirely.
3. Validate import statements against the spec order: `<uri> layer(...) supports(...) <media>`.

Example fix

// before
@import "x.css" supports(display: grid) layer(base);
// after
@import "x.css" layer(base) supports(display: grid);

function validateImportOrder(stmt) {
  const layerIdx = stmt.search(/layer\(/i);
  const supportsIdx = stmt.search(/supports\(/i);
  if (layerIdx !== -1 && supportsIdx !== -1 && layerIdx > supportsIdx) {
    throw new Error('layer() must precede supports() in @import');
  }
}
// validateImportOrder('@import "x.css" supports(...) layer(...)');

When it happens

Trigger: Writing `@import "x.css" supports(display: grid) layer(base);` — the `layer(...)` comes after `supports(...)`. The check fires when `node.value.toLowerCase() === 'layer'` is hit while `supports` is already truthy.

Common situations: Hand-writing complex `@import` conditions and ordering them by mistake; tooling/templating that concatenates conditions in the wrong sequence.

Related errors

• The rule `@apply ${list}` must not have a body.
• Exceeded maximum recursion depth while resolving `${uri}` in
• Unexpected `@plugin` option: ${toCss([decl])} `@plugin` op
• `@config` cannot have a body.
• Cannot apply unprefixed utility class `${candidate}`. Did yo

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