Build Error: Selector ":root,:host" is not pure (nextjs/postcss)

[gene-git]

versions:

   node: '23.8.0',
    "@tailwindcss/typography": "^0.5.16",
    "@tailwindcss/postcss": "^4.0.8",
    "tailwindcss": "^4.0.8"
    "postcss": "^8.5.3",

     npm: '11.1.0',
    "next": "^15.1.7",
    "react": "^19.0.0",

While I have not changed any code of mine, it is always possible there's something I am not doing correctly. That said here's what I am seeing.

Issue:

Our current production server is running tailwindcss 4.0.6 and postcss 8.5.2 with same versions of next and react and builds and runs without problems.
After updating to above versions, I am now getting this error when building

./src/app/page.module.css:2:14
Syntax error: Selector ":root,:host" is not pure (pure selectors must contain at least one local class or id)

The file page.module.css is the file imported to provide css everwhere.
It contains:

 @reference "./globals.css";

/* shared css defined below */
.container {
    @apply md:flex ...
}
all common definitions in same file

globals.css contains:

@import 'tailwindcss';
@plugin "@tailwindcss/typography";

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}


@theme {
   --shadow-3xl: 0 35px 60px rgba(0, 0, 0, 0.3);
   --shadow-4xl: 0 70px 60px rgba(0, 0, 0, 0.3);
}

When running dev using updated packages, it seems to work fine but when building for production it generates this error:

   Creating an optimized production build ...
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|javascript/auto|xxx/node_modules/next/dist/build/webpack/loaders/next-flight-css-loader.js??ruleSet[1].rules[13].oneOf[5].use[0]!xxx/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[5].use[1]!xxx/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[5].use[2]!xxx/src/app/page.module.css|rsc': No serializer registered for CssSyntaxError
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> webpack/lib/ModuleBuildError -> CssSyntaxError
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|javascript/auto|xxx/node_modules/next/dist/build/webpack/loaders/next-flight-css-loader.js??ruleSet[1].rules[13].oneOf[5].use[0]!xxx/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[5].use[1]!xxx/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[5].use[2]!xxx/src/app/page.module.css|ssr': No serializer registered for CssSyntaxError
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> webpack/lib/ModuleBuildError -> CssSyntaxError
Failed to compile.

./src/app/page.module.css:2:14
Syntax error: Selector ":root,:host" is not pure (pure selectors must contain at least one local class or id)

[wongjn]

Seems like it is due to #16676, essentially:

So given the following input CSS:

@reference "tailwindcss";
.text-red {
  @apply text-red-500;
}

We will now compile this to:

@layer theme {
  :root, :host {
    --text-red-500: oklch(0.637 0.237 25.331);
  }
}
.text-red {
  color: var(--text-red-500);
}

Where the @reference now outputs a :root, :host rule that the build is complaining about.

[gene-git]

Thanks ! The comments suggest bug is fixed in 4.0.8 but thats the version I am using- do you know if the fix is supposed to be in 4.0.8?

[wongjn]

PR #16676 is in 4.0.8. It seems like the changes in PR #16676 is what is causing your issue, not that it fixes it.

[philipp-spiess]

@gene-git Thanks for the bug report, we're looking into it.

[gene-git]

Thank you!

[gavan1]

same issue here.

[rifatnear]

I am also getting same issue, i have a request anyone know when it's will be solved ?

[gavan1]

I did a quite a few things to solve the issue.. I think these were the ones the that fixed it.

my issue seemed to be a CSS module that had an @reference , and @apply .

I commented those out as well as the

@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);

Ran the build and it seems to have fixed itself.. and was abe to uncomment ad build again.

Hope this helps others.

[glucn]

Got the same issue

[rifatnear]

@gavan1 thank you very much for your help.

i updated @tailwindcss/postcss and tailwindcss version 4.0.9 then this problem solved.

[gene-git]

@philipp-spiess thank you. Confirm 4.0.9 resolves this issue.

[philipp-spiess]

Oh yeah sorry forgot to post an update here but this should be resolved now with the latest patch release 👍