{"record":{"id":"453835844e20a96b","repo":"tailwindlabs/tailwindcss","slug":"you-cannot-use-apply-with-both-mixins-and-utili","errorCode":null,"errorMessage":"You cannot use `@apply` with both mixins and utilities. Please move `@apply ${list}` into a separate rule.","messagePattern":"You cannot use `@apply` with both mixins and utilities\\. Please move `@apply (.+?)` into a separate rule\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/tailwindcss/src/apply.ts","lineNumber":199,"sourceCode":"        offset += part.length\n      }\n\n      if (dashedIdents.length) {\n        // If we have an `@apply` that only consists of dashed idents then the\n        // user is intending to use a CSS mixin:\n        // https://drafts.csswg.org/css-mixins-1/#apply-rule\n        //\n        // These are not considered utilities and need to be emitted literally.\n        if (normalIdents.length === 0) return WalkAction.Skip\n\n        // If we find a dashed ident *here* it means that someone is trying\n        // to use mixins and our `@apply` behavior together.\n        //\n        // This is invalid and the rules must be written separately. Let the\n        // user know they need to move them into a separate rule.\n        let list = dashedIdents.join(' ')\n\n        throw new Error(\n          `You cannot use \\`@apply\\` with both mixins and utilities. Please move \\`@apply ${list}\\` into a separate rule.`,\n        )\n      }\n\n      let hasBody = child.nodes.length > 0\n\n      if (hasBody && normalIdents.length) {\n        let list = normalIdents.join(' ')\n\n        throw new Error(`The rule \\`@apply ${list}\\` must not have a body.`)\n      }\n\n      // Replace the `@apply` rule with the actual utility classes\n      {\n        // Parse the candidates to an AST that we can replace the `@apply` rule\n        // with.\n        let candidates = Object.keys(candidateOffsets)\n        let compiled = compileCandidates(candidates, designSystem, {","sourceCodeStart":181,"sourceCodeEnd":217,"githubUrl":"https://github.com/tailwindlabs/tailwindcss/blob/16e94cbf7f965c5ad697e90e940b5e178efad67c/packages/tailwindcss/src/apply.ts#L181-L217","documentation":"During `@apply` substitution the walker distinguishes normal idents (utilities) from dashed idents (CSS `@mixin`-style references per css-mixins-1). If a single `@apply` rule mixes both kinds, the behavior is ambiguous between utility expansion and literal mixin emission, which is invalid. The walker collects the dashed idents, joins them, and tells the user to move them into a separate rule.","triggerScenarios":"`@apply flex --my-mixin` or `.x { @apply p-4 --card; }` — a rule whose `@apply` params contain both a utility name and a `--dashed` ident. The dashed-ident branch at apply.ts:199 throws with the offending list.","commonSituations":"Confusing CSS native `@apply` (mixins) with Tailwind's `@apply` (utilities) in the same rule, or attempting to apply a custom property mixin alongside utilities.","solutions":["Split the rule: keep `@apply <utilities>` in one rule and `@apply --mixin` in another.","Use Tailwind's `@utility` to define the reusable styles instead of a dashed mixin.","Remove the dashed ident if it was unintentional."],"exampleFix":"/* before */\n.btn { @apply p-4 rounded --my-mixin; }\n\n/* after */\n.btn { @apply p-4 rounded; }\n.btn { @apply --my-mixin; }","handlingStrategy":"validation","validationCode":"function assertNoMixedApply(params: string) {\n  const dashed = params.split(/\\s+/).filter(t => t.startsWith('--'))\n  const normal = params.split(/\\s+/).filter(t => t && !t.startsWith('--'))\n  if (dashed.length && normal.length) {\n    throw new Error(`@apply mixes utilities and mixins (${dashed.join(' ')}); split into separate rules`)\n  }\n}","typeGuard":"function isDashedIdent(token: string): boolean { return token.startsWith('--') }","tryCatchPattern":null,"preventionTips":["Keep utility @apply and dashed-ident (mixin) @apply in separate rules.","Use @utility for reusable Tailwind-style composition instead of mixins.","Lint for mixed token types in a single @apply."],"tags":["apply","mixins","css-syntax"],"backgroundTag":null,"analyzedSha":"16e94cbf7f965c5ad697e90e940b5e178efad67c","analyzedAt":"2026-08-12T06:02:42.469Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}