cannot @extend third party css framework in scss with Laravel Mix

I'm working on a Laravel project with Tailwind Css framework.

I'm not a frontend developer, I'm a backend guy, so since now I just included Tailwind css and used its classes, but this lead me to have some elements with lots of classes to have the style defined, last of which is an action message div ended up having all these classes:

absolute bg-green-100 top-10 h-15 w-64 p-4 text-right rounded-md border-l-4 border-green-500

So I decided to learn a bit of scss, just enough to get rid of these situations.

I made my test.scss as

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

.action-message-success {
    @extend .absolute;
    @extend .bg-green-100;
    @extend .top-10;
    @extend .h-15;
    @extend .w-64;
    @extend .p-4;
    @extend .text-right;
    @extend .rounded-md;
    @extend .border-l-4;
    @extend .border-green-500;
}

and in my webpack.mix.js i just added

.sass('resources/css/test.scss', 'public/css')

But when compiling i get the error

Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: The target selector was not found.
Use "@extend .absolute !optional" to avoid this error.
  ╷
6 │     @extend .absolute;
  │     ^^^^^^^^^^^^^^^^^
  ╵

I know I'm just missing something trivial, but i cannot figure out what.