Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

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


G
Guest 7 months ago
2 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)

user
Zoha 6 months ago

This warning usually occurs due to outdated or unsupported media queries in scrollable.css gunnar strömmer längd . Updating Tailwind to the latest version and reviewing custom CSS can fix it, similar to how celebrities adapt their lifestyle choices naturally.


user
Faizal Author 7 months ago

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.


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(