"button" failed to @extend ".sans". The selector ".sans" was not found. SCSS

[sujit-baniya]

I've tried to extend the tailwind class in app.scss in resources/assets/scss/app.scss but it is throwing error as mentioned in title above. The snippet:

button, [role=button] {
    @extend .sans;
}
// Tried with below as well
button, [role=button] {
    @extend .font-sans;
}

webpack.mix.js

let mix = require('laravel-mix');
let tailwindcss = require('tailwindcss');
require("laravel-mix-purgecss");

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css').options({
       processCssUrls: false, postCss:[tailwindcss('./tailwind.js')],
    })
    .purgeCss();

app.scss

@tailwind preflight;
@tailwind components;
@tailwind utilities;
button, [role=button] {
    @extend .sans;
}
// Tried with below as well
button, [role=button] {
    @extend .font-sans;
}

Let me know what mistake did I commit and how could I resolve this issue

[Francismori7]

.sans does not exist in your sass file, it's created by PostCSS after it is converted to CSS from SASS. You're looking for @apply, not @extend, and this is why you have an error.