Re: Tailwind CSS v4 Warning - Invalid Media Query in scrollable.css (Metronic 9.3.4)
Hello KeenThemes Support Team,
I'm using Metronic 9.3.4 (Tailwind HTML) and encountering a build warning with Tailwind CSS v4.1.16.
ISSUE:
During CSS compilation, I receive the following warning:
Found 1 warning while optimizing generated CSS:
@media (max-width: var(--screen-lg)) {
^-- Invalid media query
LOCATION:
File: src/css/components/scrollable.css (Line 102)
CAUSE:
Tailwind CSS v4 has stricter validation and doesn't support CSS variables directly in media query conditions.
SUGGESTED FIX:
Replace:
@media (max-width: var(--screen-lg)) {
With:
@media (max-width: 1024px) {
IMPACT:
- Warning appears on every production build
- Functionality is not affected (CSS works correctly)
- Prevents achieving zero-warning builds
ENVIRONMENT:
- Metronic Version: 9.3.4 (Tailwind HTML)
- Tailwind CSS: 4.1.16 (using @tailwindcss/cli)
- Webpack: 5.99.9
Could you please address this in an upcoming update to ensure full Tailwind v4 compatibility?
Thank you for the excellent product and your support!
Best regards
Replies (1)
Hi
Thank you for the detailed report and the suggested fix. Replacing var(--screen-lg) with 1024px in the media query at line 102 of scrollable.css is correct. This aligns with Tailwind CSS v4's stricter validation, which doesn't support CSS variables in media query conditions.
If you need to eliminate the warning immediately, you can apply your suggested fix. The functionality will remain unchanged, and the warning will be resolved. For a permanent solution, the next Metronic update will include this fix.
Thank you for helping improve Metronic.
