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

Issue

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, not 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.

Solution

You can't apply a class to itself. outline is already defined (one of the default tailwind classes), you are trying to define and apply it again.

See the error: https://play.tailwindcss.com/cdQLeYFcNH?file=css

Error

<css input>: Circular dependency detected when using: @apply outline

Use a different custom class. Like .custom-outline: https://play.tailwindcss.com/qo8M6Zkj31

Answered By - doğukan