This usually happens when the Tailwind / Metronic build pipeline is skipped. The & syntax is not valid plain CSS it’s SCSS nesting syntax that should be compiled during the build process. In Metronic 9.3.1, core styling is no longer distributed as pre-compiled plain CSS in the same way as older 9.2.x versions. If you copy files directly from metronic-tailwind-html-demos/dist/assets into an Angular project, you bypass the required SCSS → CSS + Tailwind processing steps, which leads to exactly these syntax errors.
To fix it, you’ll need to update your Angular project using the Metronic Angular package, not the HTML demo assets. The Angular version ships with the full build pipeline (Webpack / Tailwind config / SCSS sources) that compiles these nested selectors correctly. In short:


Download the Metronic Angular package for 9.3.1.


Merge the src/styles, scss, and Tailwind config files instead of copying CSS from the HTML demo.


Run the project build so SCSS nesting resolves to valid CSS.


Directly swapping CSS files will not work now because Metronic has shifted more styling logic to SCSS and utility classes. Once you use the correct Angular source package, the & nesting issue disappears.

Seems to work. Thanks!

Hi

Sorry for the delay. The issue was with Metronic CSS itself and not KTUI.

We will include the fix in the next Metronic weekly updates.

/metronic-tailwind-html-demos/src/css/components/menu.css
https://gist.github.com/faizalmy/8d45a015e63afee04677a4b44a0b4c16

You can use this if you want to rebuild Metronic assets yourself.

Thanks

Yes.

9.3.2 had the "&" in it. (Compilation was wrong, missing)
9.3.3 has the ".." in it. (Compilation errors? )

Hi Samuel,

Are you using v9.3.3?

I get the same errors like when i compiled it myself:

.kt-menu-item.here > .kt-menu-link..kt-menu-item-here\:text-primary {
color: var(--primary);
}
.kt-menu-item.here > .kt-menu-label .kt-menu-item-here\:text-primary {
color: var(--primary);
}
.kt-menu-item.here > .kt-menu-label..kt-menu-item-here\:text-primary {
color: var(--primary);
}
.kt-menu-item.here > .kt-menu-toggle .kt-menu-item-here\:text-primary {
color: var(--primary);
}
.kt-menu-item.here > .kt-menu-toggle..kt-menu-item-here\:text-primary {
color: var(--primary);
}

Again here the double points. One point would be valid css:

.kt-menu-item.here > .kt-menu-link.kt-menu-item-here\:text-primary {
color: var(--primary);
}

So not fixed yet.

Hi Samuel Reinfelder

Please try with the latest version. Get the assets from the HTML version.

Thanks

Thanks!

After compiling the styles.css still has around 100 errors in it:

.kt-menu-item.here>.kt-menu-toggle..kt-menu-item-here\:text-mono {
color: var(--mono);
}

(the double point). Manually fixing these seems to fix the styles.css. It feels a bit hacky though.

Hi Samuel Reinfelder

Here is a workaround. From the HTML version /metronic-tailwind-html-demos
Please update package.json scripts:

"build:css": "npx @tailwindcss/cli -i ./src/css/styles.css -o ./dist/assets/css/styles.css && npx postcss ./dist/assets/css/styles.css --replace --use postcss-nesting --no-map",
 "build:prod": "npx @tailwindcss/cli -i ./src/css/styles.css -o ./dist/assets/css/styles.css --minify && npx postcss ./dist/assets/css/styles.css --replace --use postcss-nesting --no-map && npx webpack --env production",

Any updates on this?

Hi Samuel Reinfelder

Sorry for the inconvenience. We will fix this issue.

Thanks