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

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

from portfolio.

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

from portfolio.