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.