Tailwindcss: shadowLookup no longer working?

[JelleScheer]

Hi!

I'm using the latest version of Tailwind with Vue, and I came across the shadowLookup function which seems to do exactly what I need. I tried it but the same '@apply can only be used for classes in the same CSS tree' keeps popping up.

Is the shadowLookup function no longer working in the latest Tailwind version, or am I doing something wrong?

Thanks!

[hacknug]

shadowLookup is now always enabled by default. Are you sure you're trying to @apply an existing class name? Do you have a repo with your project that we can clone to help you debug the issue?

[tlgreg]

Are you trying to @apply a tailwind generated class or a custom css class?

If former, not sure what's wrong, would need to see the code.

If later, then tailwind (shadowLookup) can't support applying classes that are defined in different components. This didn't work while shadowLookup was an optional experimental feature either.
The reason is that vue processes each component in a separate postcss process, so tailwind simply can't know about what's defined in another component. If possible you can move the common class definition into a tailwind plugin. Plugins generated classes can also be used with @apply.

[JelleScheer]

It's a custom css class, defined in a seperate CSS file outside of the Vue component.
Example:

main.scss:
@tailwind base; @tailwind components; @import 'custom-classes'; @tailwind utilities;

custom-classes.scss:
.foo { @apply bg-red-500; }

my-component.vue
<style lang="scss" scoped> .card { @apply .foo; } </style>

So I guess this isn't working because of what you mentioned, @tlgreg?

[adamwathan]

Move your custom classes to a Tailwind plugin and it will work.

[JelleScheer]

Ah, thought it wasn't necessary with the shadowLookup option, my bad. Thanks for the help!

[GerardRodes]

Move your custom classes to a Tailwind plugin and it will work.

I have a big style file as custom-classes do i have to rewrite it enterely as tailwind plugin?
can't i just import it as postcss somewhere?