#Tailwind v4 @apply in Astro component not working?

5 messages · Page 1 of 1 (latest)

trail pasture
#

I have Tailwind V4 configured as Vite plugin, and it lives in global.css, which is imported in my Layout.astro.

But if I try to use @apply in a component, seems it doesn't know what to do with some of the classes given.

.btn {
  @apply inline-flex items-center justify-center px-4 py-2 rounded text-sm font-medium transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
}

gives

Cannot apply unknown utility class: px-4

If I remove

px-4 py-2 rounded text-sm font-medium

It uses the rest of the classes without throwing any errors.

#

.. I actally figured this out while I was writing up this and making some testing, but I'll put it here in case other people are experiencing the same for whatever reason.

To make those specific utility-classes work, I had to add

@reference "my-global-with-tailwind.css";

Under the opening <style> and then it worked fine again.

No idea why, but nice to know I can just reference that without duplicating all the things.

fallow dove
#

You need to use @utility

For example:

@utility btn {
  @apply px-4 py-2 etc
}
trail pasture
#

I got it working without it though?
Sort of. I broke it again. 😄

fallow dove