This PR improves error messages when @apply fails. Right now it gives you a generic error message that you cannot apply a certain utility.

.foo {
  @apply bg-red-500;
}

Would result in:

Cannot apply unknown utility class: bg-red-500

However, there are some situations where we can give you more context about what's happening.

Missing @import "tailwindcss" or @reference

If you are in a Vue file for example, and you have the following code:

<template>
  <div class="foo"></div>
</template>

<style>
.foo {
  @apply bg-red-500;
}
</style>

Then this will now result in:

Cannot apply unknown utility class `bg-white`. Are you using CSS modules or similar and missing `@reference`? https://tailwindcss.com/docs/functions-and-directives#reference-directive

We do this by checking if we found a @tailwind utilities or @reference. If not, we throw this more specific error.

Explicitly excluded classes via @source not inline('…')

Or via the legacy blocklist from a JS config.

If you then have the following file:

@import "tailwindcss";

@source not inline('bg-white');

.foo {
  @apply bg-white;
}

Then this will now result in:

Cannot apply utility class `bg-white` because it has been explicitly disabled: https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-excluding-classes

We do this by checking if the class was marked as invalid.

Applying unprefixed class in prefix mode

If you have the prefix option configured, but you are applying a non-prefixed class, then we will show the following error:

Given this input:

@import "tailwindcss" prefix(tw);

.foo {
  @apply underline;
}

The following error is thrown:

Cannot apply unprefixed utility class `underline`. Did you mean `tw:underline`?

Applying known utilities with unknown variants

If you have unknown variants, then we will list them as well if the base utility does compile correctly.

Given this input:

@import "tailwindcss";

.foo {
  @apply hocus:hover:pocus:bg-red-500;
}

The following error is thrown:

Cannot apply utility class `hocus:hover:pocus:bg-red-500` because the `hocus` and `pocus` variants do not exist.

Test plan

1. Everything behaves the same, but the error messages give more details.
2. Updated tests with new error messages
3. Added new unit tests to verify the various scenarios
4. Added a Vue specific integration test with a <style>…</style> block using @apply

[ci-all] There are some newlines here and there, let's verify that they work identically on all platforms.