Improve error messages when @apply fails

[RobinMalfait]

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-red-500`.
It looks like you are missing a `@reference "app.css"` or `@import "tailwindcss";`

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 `bg-white`, it seems like the utility was explicitly excluded and cannot be applied.

More info: 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`?

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