Angular 14 Error: Nested CSS detected, but CSS nesting is configured incorrectly

Question

I have some nested css in one of my component's css files. When I do "ngserve" the CSS doesn't work and I get this error:

(11:5) Nested CSS detected, but CSS nesting has not been configured correctly. Please enable CSS nested plugins *before* Tailwind in your configuration. See here: https://tailwindcss.com/docs/using-with-preprocessors#nesting

This is a new project created using Angular CLI 14, with tailwind installed according to the instructions here: https://tailwindcss.com/docs/guides/angular

I tried adding the postcss.config.js file to my project as specified in the link provided in the error, but nothing seems to be happening:

module.exports = {
      plugins: {
        'postcss-import': {},
        'tailwindcss/nesting': {},
        tailwindcss: {},
        autoprefixer: {},
      }
    }

Answer 1

For anyone having the same problem using tailwind with SCSS, I solved it by removing the following imports from the styles.scss file:

@import url('./styles/utility.scss');

Since url is CSS specific syntax, my guess is that tailwind (or postcss to be precise) thinks the file inside the brackets will always be a CSS file. Therefore, once nesting is encountered, the error is thrown.

Solved by using the @use syntax specified by SCSS when importing CSS: https://sass-lang.com/documentation/at-rules/use/