New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs

Re: ⚠️ Build system broken — Prod & Dev builds failing / Invalid CSS selectors


We have a blocking frontend build issue that needs immediate attention.

Summary (short):
- Production build (`npm run build:prod`) produces Tailwind/PostCSS warnings and outputs invalid CSS.
- There is no `npm run build:dev` script in package.json. The closest development build command is `npm run build`.
- Build output includes malformed CSS selectors and an invalid media query, affecting UI.

Exact npm scripts from package.json:

npm run build:prod → Production build (Tailwind + PostCSS + Webpack)
npm run build → Runs build:css + build:js in dev mode
npm run build:css → Runs Tailwind + PostCSS
npm run build:css:watch → Tailwind watch mode
npm run build:js → Webpack dev build
npm run lint → ESLint

Problem Observed:
Tailwind/PostCSS outputs 103 warnings like:

.kt-menu-item.active > .kt-menu-link.&
^-- Expected identifier in class selector, got Delim('&')

Selectors affected:
- .kt-menu-link.&
- .kt-menu-label.&
- .kt-menu-toggle.&
States affected: active, here, show

Invalid media query also found:

@media (max-width: var(--screen-lg))
^-- Invalid media query

Impact:
• CSS output is malformed
• UI menu active / toggle states may break visually
• Production & development builds cannot be reliably used

Action Required:
1. Fix invalid selectors (remove the `.&` suffix in CSS).
2. Correct media query (CSS variables cannot be used directly inside media queries).
3. After fixing, rerun:
- npm run build:prod
- npm run build

Suggested Fix Example:

Incorrect:
.kt-menu-item.active > .kt-menu-link.& { }

Correct (probably):
.kt-menu-item.active > .kt-menu-link { }

Steps to reproduce:
1. Run `npm install`
2. Run `npm run build:prod`
3. Review Tailwind/PostCSS output errors

The above issues affect the following items:
1. metronic-tailwind-html-demos
2. metronic-tailwind-html-starter-kit
3. metronic-tailwind-nextjs-landings
4. metronic-tailwind-react-concepts
5. metronic-tailwind-react-demos
6. metronic-tailwind-react-starter-kit

Platform:
MacOS, Ubuntu & Fedora Desktops

Please fix and notify once resolved so I can re-test.

Thanks.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (0)