@screen directive in v4

[nielsvh2103]

Hi,

Im running into issues with tailwind on postcss where the screen directive no longer works.
I upgraded to v4 with the postcss options (@tailwindcss/postcss)

Now, i checked the docs on v3 and screen() is on there.
https://v3.tailwindcss.com/docs/functions-and-directives#screen

But there are no mentions of it on v4
https://tailwindcss.com/docs/functions-and-directives

On v4 however, its not and its also not in the upgrade guide that its been removed and what else we can use instead of screen() or @screen

So my question is, what can i use now or what should i change?
Example;

@screen sm {
   @apply grid-cols-3;
}

No longer works

[wongjn]

@variant

---

As an aside, Adam Wathan (creator of Tailwind) does seem to advocate avoiding @apply:

• https://twitter.com/adamwathan/status/1226511611592085504
• https://twitter.com/adamwathan/status/1559250403547652097

[devenini]

Ty! No other way than nesting at the moment?

[wongjn]

Media queries are naturally nested. If you mean beyond one "level", you could do:

:root {
  @media (min-width: theme(--breakpoint-md)) and (max-width: theme(--breakpoint-lg)) {
    color: red;
  }
}

Or

@media (min-width: theme(--breakpoint-md)) and (max-width: theme(--breakpoint-lg)) {
  :root {
    color: red;
  }
}

But please be aware theme() is considered deprecated.

[devenini]

Noted. Ty!

[nth-chile]

Is there a clear answer here? replacing @screen with @variant gives me Error: Cannot use @variant with unknown variant: sm

[wongjn]

You might need to use the @reference directive.

[PlasticOddball]

Hey there!

It looks like the screen() directive was indeed removed in Tailwind CSS v4, which is probably why it's no longer working for you. In v4, Tailwind introduced a new way of handling responsive breakpoints. Instead of using @screen or screen(), you now use the @apply directive directly with the screen size, like so: DadeSchools

@layer components {
  .my-class {
    @apply grid-cols-3;
  }
}

Then, for the responsive part, you just use Tailwind’s built-in responsive classes directly in your HTML, like:

<div class="sm:grid-cols-3 lg:grid-cols-6">
  <!-- Your content here -->
</div>

For more details, make sure to check the updated docs for v4, especially regarding how to handle responsive utilities. The update should make things more intuitive once you get the hang of it!

Let me know if that clears things up!

[wongjn]

Incorrect AI answer.

[dan-caldwell]

Try something like this:

@media (min-width: theme(--breakpoint-md)) {
  body {
    @apply bg-gray-100;
  }
}

[nth-chile]

Not working for me, and neither does the suggested @media (width >= theme(--breakpoint-sm)) { ... }

[amayanga]

Make sure to add @reference "tailwindcss"; to your stylesheet to reference the breakpoints.

[oneyoung19]

I wonder why @screen is deprecated. In my opinion, @media is a hack that adds a lot of mental overhead.

[wongjn]

@variant can do what @screen used to be able to do but for any variant.

[oneyoung19]

Thank you.I got it now. @variant

[tom-wenger]

Could you maybe post an example of how you use @variant to replace @screen?

[wongjn]

@screen sm {
  element {
    property: value;
  }
}

Would be:

@variant sm {
  element {
    property: value;
  }
}

See the documentation for more examples.