media query not work properly with theme variables

[Yang-Yus]

What version of Tailwind CSS are you using?

4.0.3

What build tool (or framework if it abstracts the build tool) are you using?

Vite

What version of Node.js are you using?

20.12.2

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/aYjkwS7Og5

Describe your issue

@theme {
  --color-rose-500: #FFC8EF;
  --breakpoint-sm: 40rem;
}

 /* min-width: var(--breakpoint-sm) NOT WORKING */
 .container{
  @media all and (min-width: var(--breakpoint-sm)) {
    padding-left: 100px;
    padding-right: 100px;
  }
}

[wongjn]

The is due to a limitation in CSS whereby CSS variables cannot be used within media queries.

As a work-around, you could consider:

• Using @variant like:

  .container {
    @variant sm {
      padding-left: 100px;
      padding-right: 100px;
    }
  }

• Using theme() like:

  .container {
    @media all and (min-width: theme(--breakpoint-sm)) {
      padding-left: 100px;
      padding-right: 100px;
    }
  }

[Yang-Yus]

got it, theme() works as expected! thanks!

[arthurlbrjc]

I have the same issue, theme() or @variant work-arounds are not working either.

• Working for reference

@media screen and (min-width: 620px) {
  .container {
    width: 10vw;
  }
}

• Not working

@media screen and (min-width: theme(--breakpoint-sm)) {
  .container {
    width: 10vw;
  }
}

• Not working : Cannot use @variant with unknown variant: sm during build

@variant sm {
  .container {
    width: 10vw;
  }
}

• Not working : Cannot use @variant with unknown variant: custom during build

@custom-variant custom (@media (min-width: 620px));

@variant custom {
  .container {
    width: 10vw;
  }
}

[wongjn]

Using @variant is the way to go. The errors mean you need to use the @reference directive in the stylesheet you are using @variant.

[arthurlbrjc]

Thanks @wongjn, it seems indeed that @variant with @reference is the way to go.

[arthurlbrjc]

(needed v4.0.9 for a bugfix regarding @reference)