Correctly configured postcss-nesting to remove Nested CSS detected error as shown below. This was caused by the cookie consent banner that required nested styling when the "hide" class was added to it once Visitors accept or reject site cookies.
[vite:css] Nested CSS was detected, but CSS nesting has not been configured correctly. Please enable a CSS nesting plugin *before* Tailwind in your configuration. See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting 108| transition: bottom .5s ease; 109| 110| &.hide{ | ^ 111| bottom:-412px; 112| } [vite:css] Nested CSS was detected, but CSS nesting has not been configured correctly. Please enable a CSS nesting plugin *before* Tailwind in your configuration. See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting 1 | @tailwind base; | ^ 2 | @tailwind components; 3 | @tailwind utilities; 11:10:11 AM [serve] 404 /output.css [vite:css] Nested CSS was detected, but CSS nesting has not been configured correctly. Please enable a CSS nesting plugin *before* Tailwind in your configuration. See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting 108| transition: bottom .5s ease; 109| 110| &.hide{ | ^ 111| bottom:-412px; 112| } [vite:css] Nested CSS was detected, but CSS nesting has not been configured correctly. Please enable a CSS nesting plugin *before* Tailwind in your configuration. See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting 1 | @tailwind base; | ^ 2 | @tailwind components; 3 | @tailwind utilities;
Correctly configured postcss-nesting to remove Nested CSS detected error as shown below. This was caused by the cookie consent banner that required nested styling when the "hide" class was added to it once Visitors accept or reject site cookies.
For more info visit https://docs.astro.build/en/guides/styling/#postcss
[vite:css] Nested CSS was detected, but CSS nesting has not been configured correctly. Please enable a CSS nesting plugin *before* Tailwind in your configuration. See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting 108| transition: bottom .5s ease; 109| 110| &.hide{ | ^ 111| bottom:-412px; 112| } [vite:css] Nested CSS was detected, but CSS nesting has not been configured correctly. Please enable a CSS nesting plugin *before* Tailwind in your configuration. See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting 1 | @tailwind base; | ^ 2 | @tailwind components; 3 | @tailwind utilities; 11:10:11 AM [serve] 404 /output.css [vite:css] Nested CSS was detected, but CSS nesting has not been configured correctly. Please enable a CSS nesting plugin *before* Tailwind in your configuration. See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting 108| transition: bottom .5s ease; 109| 110| &.hide{ | ^ 111| bottom:-412px; 112| } [vite:css] Nested CSS was detected, but CSS nesting has not been configured correctly. Please enable a CSS nesting plugin *before* Tailwind in your configuration. See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting 1 | @tailwind base; | ^ 2 | @tailwind components; 3 | @tailwind utilities;