How to apply a global custom utility to a class?

[sebastiencrevier]

Hi,

I'm trying to add a custom utility to a Vue component CSS class like I would do with any other built-in utility but I get the following error message:

@apply cannot be used with .full-height because .full-height either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .full-height exists, make sure that any @import statements are being properly processed before Tailwind CSS sees your CSS, as @apply can only be used for classes in the same CSS tree.

The full-height class exists globally, I could add it directly as a class to my HTML but if I try to add it using @apply it doesn't work.

Am I missing something?

global.css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@import "./utilities.css";

utilities.css

.full-height {
  @apply flex-1 flex flex-col min-h-full;
}

app.vue

<style lang="postcss" module>
.container {
  @apply full-height max-w-full;
}
</style>

[adamwathan]

Hey! There are two things worth understanding here:

1. @apply is not meant to be used to apply other classes that are also using apply — everything is processed in a single pass and meant only for directly applying utilities. This thread is worth reading on this topic: Tailwind utility plugin generates invalid css when class is used in @apply #1710

2. Vue processes all of your style blocks in single file components in isolated scopes, so that means if you try to apply a class that is defined in a separate file, it can't work because Tailwind has no idea the class exists because Vue doesn't process all of the CSS together as one concatenated blob. The solution is to define your custom utilities as a custom Tailwind plugin instead, then Tailwind always "knows" about your utilities, even when running in an isolated scope.

That said, because of point 1, I would still not recommend doing this as it's easy to run into situations where you are not getting the results you expect.

I would consider using something like postcss-mixins instead of @apply if you are trying to compose lots of custom CSS like this.

[sebastiencrevier]

Hey thanks for the quick answer!

It makes total sense. I think it would be worth mentioning in the documentation, how the main frontend frameworks such as Vue interacts with Tailwind.

Keep up the good work!