After V4 upgrade I am confused on how to use @apply with custom css

[newbelaravel]

Hello,
I am finding transition to V4 quite challenging. I have almost everything set up. I want to use custom "normal" CSS on an apply:

But I get error "[postcss] Cannot apply unknown utility class: bg-size-200"

When I used V3, I could define those CSS (although with different syntax) in tailwind.config.js, inside "theme" block. I also tried to put it now inside the @theme, but probably I'm not getting the right syntax. Can somebody advise?
Thanks!!

[wongjn]

You'd need to register those class names with @utility so that Tailwind knows about them:

@utility bg-size-200 {
  …
}

@utility bg-pos-0 {
  …
}

@utility bg-pos-100 {
  &:hover {
    …
  }
}

Alternatively, you could forgo them altogether:

@utility btn-calculate {
  …
  background-size: …;
  background-position: …;
  
  &:hover {
    background-position: …;
  }
}

Or better yet, use your templating system:

-<button class="btn-calculate">
+<CalculateButton>

<button class="… bg-[size:200%_200%] bg-left-top hover:bg-right-bottom">
  {{ content }}
</button>

---

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
• https://x.com/adamwathan/status/1890406016291938701

[newbelaravel]

Thanks!!! went with this:
w-full max-w-sm cursor-pointer rounded-lg bg-linear-to-r from-primary to-secondary duration-500 bg-[size:200%_200%] bg-[position:0%_0%] hover:bg-[position:100%_100%]
Still keeping the @apply. In V3 I found it encouraged on the documentation for these kind of simple use cases https://v3.tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply
But will consider using the templating system (blade).
thanks

[wongjn]

If you read the very last paragraph (emphasis mine):

If you’re going to use @apply, use it for very small, highly reusable things like buttons and form controls — and even then only if you’re not using a framework like React where a component would be a better choice.

So it seems like the documentation isn't recommending @apply for you, since you are using a templating system.