@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

[nielsvh2103]

Hey,

Alright sounds good i could also just rewrite it to pure tailwind i guess.

@variant seems more to be of how specific classes should work if you add a utility

@variant doesnt seem to work when i do something like:

@variant lg {
   grid-template-columns: 1fr 150px 190px 160px 150px;

   &.languages {
      grid-template-columns: 1fr 124px auto 190px 160px 150px;
   }
}

so i guess replacing it with pure tailwind is the way to go?

[wongjn]

Seems to be working in this Tailwind Play.

[nielsvh2103]

It does, odd.

I was in vue and used the @reference from the upgrade guide

For now ive just put it at tailwind classes that worked