@apply is not supported within nested at-rules like @mixin

I'm trying to apply Tailwind classes to @mixin which is @include in a CSS selector as follows:

@mixin card ($shadowColor) {
    @apply p-4 m-4 shadow-xl $shadowColor;
    border-radius: 4px;
    border: 1px solid black;
}

#works {
    @apply text-center;

    & #works-list {
        @apply grid sm:grid-cols-1 md:lg:grid-cols-4 md:lg:gap-4;

        & article {
            @include card ('shadow-green-600');
            @include font-anironc;

            @apply flex items-center justify-center;
        }
    }
}

However, I have the following error:

CssSyntaxError ... @apply is not supported within nested at-rules like @mixin.

I checked upon the Tailwind documentation and this GitHub Issue but I could not make it work nor I am sure of how to un-nest these rules.

Here my postcss.config.js file:

module.exports = {
    parser: "postcss-scss",
    plugins: {
        "postcss-import": {},
        "tailwindcss/nesting": "postcss-nesting",
        tailwindcss: {},
        autoprefixer: {},
        "@csstools/postcss-sass": "./src/css/style.scss",
    },
};

How may I make it work ?

I'll give you a bit more context, it's an educational project in which we have to mix PostCSS and Tailwind even if it's not recommended.

Feel free to ask me further information.

Solution

Consider compiling the SCSS before Tailwind sees it by reorganizing the order of the PostCSS plugins:

plugins: {
  "@csstools/postcss-sass": "./src/css/style.scss",
  "postcss-import": {},
  "tailwindcss/nesting": "postcss-nesting",
  tailwindcss: {},
  autoprefixer: {},
},

Or perhaps

plugins: {
  "postcss-import": {},
  "@csstools/postcss-sass": "./src/css/style.scss",
  "tailwindcss/nesting": "postcss-nesting",
  tailwindcss: {},
  autoprefixer: {},
},

Depending on whether you want @csstools/postcss-sass or postcss-import to resolve @imports.

For your information, it is completely fine that you use Tailwind with PostCSS – Tailwind is a PostCSS plugin! As per their documentation, it's Sass that is not recommended to be used in conjunction with Tailwind:

For the best development experience, we highly recommended that you use PostCSS exclusively, and that you don’t use preprocessors like Sass or Less in your Tailwind projects.