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
Error console:
Fix:
Top comments (0)