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: {},
}
} 
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
For anyone having the same problem using tailwind with SCSS, I solved it by removing the following imports from the
styles.scssfile:@import url('./styles/utility.scss');Since
urlis 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/