Scoped tailwind in NextJs page routes does not apply to media query

I am trying to scope tailwind styles to apply it only to specific pages. It works but media queries is not working.

css file where tailwind is imported

.tw-layout {
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
}

No additional config. Styles are working when inspected like

.tw-layout {
  .w-full {
    width: 100%;
  }
}

But the media query is

@media (min-width: 1024px) {
 .lg\:flex-row {
     flex-direction: row;
 }
}

I'm using NextJs page routes.

Answer

Well, if you want to specify that tailwind should only run in certain files whether with/without the media query you should change that in the tailwind.config.js file, specifically in the content key:

content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], //this is an example, here you should specify the files or the folders should be affected,

In case you have an already old css that's made on the website you can use the ! for example !lg:mr-5 or even lg:!mr-5 before the necessary tailwind classes so it makes it important and prioritize it so it can work and give a result.

The other workaround you can utilize is to use css modules files with the @apply keyword and import the necessary module classes to the exact items.