next.js icon indicating copy to clipboard operation
next.js copied to clipboard

Cannot use css media queries (screen size)

Open TurniXXD opened this issue 2 years ago • 0 comments

Verify canary release

  • [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Wed, 05 Oct 2022 12:15:15 +0000
Binaries:
  Node: 16.16.0
  npm: 8.11.0
  Yarn: 1.22.19
  pnpm: N/A
Relevant packages:
  next: 13.0.1-canary.0
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Brave

How are you deploying your application? (if relevant)

No response

Describe the Bug

I cannot use media queries for minimal / maximal screen width / height in client component. First I tried tailwindcss sm: abbriviations and then native css but nothing seems to work.

Expected Behavior

I can use media queries normally.

Link to reproduction

https://github.com/TurniXXD/blog

To Reproduce

  • Create next app with typescript
  • Add the experimental: { appDir: true } config
  • Setup tailwindcss

TurniXXD avatar Oct 28 '22 17:10 TurniXXD