Tailwind CSS: The `outline` class does not exist. Yet this is not a custom style, but a framework class

Viewed 2503

In a new project I get the strange behavior where everything works as intended, except for Outline and related: https://tailwindcss.com/docs/outline-style

The error received:

The outline class does not exist. If you're sure that outline 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.

This is in an @apply for a component eg:

    .button {
        @apply bg-primary hover:bg-secondary;
    }

    .primary {
        @apply border-2 md:border-none border-primary md:border-transparent;
    }

Yet this does not work:

    .outline {
        @apply outline outline-2 outline-offset-2 focus:outline-yellow-500;
    }

To ensure this is in the same import tree, these are applied in the index.css as part of the components layer:

   @layer components {
      ...
   }

Any insights into this will be highly appreciated, as none of the references (tailwind documentation, nor their repo bugs, addresses this issue in a workable manner, each example found points to user error. Which may just be the case here, but I am yet to find the issue.

1 Answers
Related