[SYNTAX ERROR]: Selector ":root" is not pure (pure selectors must contain at least one local class or id)

[MilanObrenovic]

At first everything worked fine. After modifying the code, converted globals.css into globals.scss etc all of a sudden ALL of the .css files can't compile, giving me this error:

I haven't modified Any of the .css files.

On a side note, how can a plain old .css file contain nested css attributes? I've seen that only in SASS/SCSS, never pure css.

How to fix this issue?

EDIT: after further researching I'm 99% sure this is because of tailwindcss and its postcss.config.js plugin. Something is causing this conflict and the Hamish's code can't compile if tailwindcss is used.

Anyone knows how to use tailwindcss in this project?

[MilanObrenovic]

Bump. After installing sass with npm install sass, this error keeps popping up. Also some animations/styles break and are no longer smooth just because of installing sass.. even when i uninstall sass, the animations are still broken and the error still occurs. No idea why is this happening, does someone know how to fix this? @HamishMW

[MilanObrenovic]

I think I fixed it. In postcss.config.js you must enable CSS nesting:

module.exports = {
  plugins: {
    'postcss-flexbugs-fixes': {},
    'postcss-preset-env': {
      autoprefixer: {
        flexbox: 'no-2009',
      },
      stage: 3,
      features: {
        'nesting-rules': true,
        'custom-media-queries': {
          importFrom: 'src/layouts/App/global.scss',
        },
      },
    },
    'postcss-import': {},
    'tailwindcss/nesting': 'postcss-nesting',
    tailwindcss: {},
    autoprefixer: {},
  },
};

IMPORTANT:

1. If you make any change in this file, delete .next/ folder
2. Start the app npm run dev

No idea why but this .next/ folder causes random compilation bugs if its not deleted on every change... This is the only way to get tailwindcss compatible in nextjs with this project