Nested CSS was detected, but CSS nesting has not been configured correctly - Astro

Sergiu Mironescu — Tue, 19 Sep 2023 13:06:10 +0000

Hello,

After following the steps from the Atros Docs, I get the error on the console (check screenshots).
Seems that somehow PostCSS config has some conflicts with Tailwind, following the Astro Doc.

MacOSX Ventura 13.5.1
VSCode
"astro": "^3.1.0",
package.json:



{
  "name": "sm_astro",
  "type": "module",
  "version": "0.0.1",
  "browserslist": [
    "defaults"
  ],
  "scripts": {
    "dev": "bun --bun astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
  },
  "dependencies": {
    "@astrojs/partytown": "^2.0.0",
    "@astrojs/sitemap": "^3.0.0",
    "@astrojs/tailwind": "^5.0.0",
    "@typescript-eslint/parser": "^6.7.0",
    "astro": "^3.1.0",
    "astro-icon": "^0.8.1",
    "autoprefixer": "^10.4.15",
    "eslint-plugin-astro": "^0.29.0",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "tailwindcss": "^3.3.3"
  },
  "devDependencies": {
    "bun-types": "^1.0.2",
    "eslint": "^8.49.0"
  }
}

Changed from:



const autoprefixer = require('autoprefixer');

module.exports = {
   plugins: [
      autoprefixer(),
   ]
};

To:



module.exports = {
   plugins: {
      'tailwindcss/nesting': {}, <--- Needs this
      tailwindcss: {},
      autoprefixer: {},
   }
};

You can check the reproducible error here and the fix commented on postcss.confic.jsc

https://stackblitz.com/edit/github-elgzfe-pwwt3m?file=src%2Flayouts%2FLayout.astro,postcss.config.cjs,package.json

Error console:

Fix:

Forem: Sergiu Mironescu

Nested CSS was detected, but CSS nesting has not been configured correctly - Astro