::before, ::after" is not pure (pure selectors must contain at least one local class or id)

[DanielSoCra]

What version of Tailwind CSS are you using?

3.0.7

What build tool (or framework if it abstracts the build tool) are you using?

"next": "12.0.7",
"postcss": "^8.4.5",
"@nrwl/next": "13.4.1",
"autoprefixer": "^10.4.0",

What version of Node.js are you using?

v16.13.1

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://github.com/DanielSoCra/test-nx

Describe your issue

I am setting up a monorepo with nx to have a component library shared accross a website built with NextJs and a traditional CSR React.js App.

So far, the React App is working fine with the shared library.
The Nextjs app however throws the following error:

Failed to compile
../../libs/shared-ui/src/lib/shared-ui.module.css
CssSyntaxError

([object Object]:[object Object]) Selector "*,
::before,
::after" is not pure (pure selectors must contain at least one local class or id) 

The shared-ui.module.css only has the following content:

@tailwind base;
@tailwind components;
@tailwind utilities;

Please refer to the provided Link and repo for all detailed configurations of tailwind.
I already searched and tried a few things, but nothing worked.

[adamwathan]

Hey! This is because you are trying to put Tailwind’s base styles in a CSS module, and CSS modules can’t contain those types of rules. This is just how CSS modules work, you shouldn’t put Tailwind’s base styles in a module, the two concepts are just not compatible. It’s like trying to wash your dirty laundry in the microwave 😄

[DanielSoCra]

Edit

I found out how to do it :)

This branch contains the basic setup:
https://github.com/DanielSoCra/test-nx/tree/tailwind-shared-lib

Basically, I had NOT to import the css inside the lib, but in the apps/website and apps/webapp respecitvely.
For the rest of the configs with postcss and tailwind refer to the repository.

Original:

---

Thank you for your quick reply adam!

Can you tell me what the solution is to have a shared component lib / module with tailwindcss?

[danjebs]

@adamwathan I had the same error message when re-building a project today (5 Jan). The same repo was successfully building on 1 Jan, and there were no changes made to my SCSS modules or imports in that time. Locking the Tailwind version to 3.09 or below worked (build succeeded).

Seems there was an issue with v3.0.10, still present in 3.0.11.

It'll be tricly to make a minimal reproducible repo. But the *.module.scss files that were being mentioned in the error messages had no offensive imports or selectors in them - commenting out the entire file led to whack-a-mole where another file would get mentioned. An example file is below (the imported file is purely a set of constant declarations):

@import '../../assets/stylesheets/constants.scss';

.container {
  @apply px-2 my-auto sm:mx-auto;

  @media (min-width: $md-width) {
    @apply px-4;
  }

  @media (min-width: $lg-width) {
    width: 84rem;
  }
}

I would guess there is an issue with either imports or the @apply directive. I guess caused by #6580 or #6875