Laravel mix not compiling tailwindcss v0.7.4 @apply directives

i'm having an issue with compiling tailwindcss v0.7.4 in my laravel 5.8 app, in my webpack.js i have this

	var tailwindcss = require('tailwindcss');

	mix.js('resources/assets/js/app.js', 'public/js')

		.sass('resources/assets/sass/app.scss', 'public/css')

		.options({

			processCssUrls: false,

			postCss: [ tailwindcss('./tailwind.js') ],

		});

then on my app.scss i have tailwind directive like this

@tailwind preflight;

@tailwind components;
	.shadow-style-sm {

  		@apply appearance-none no-underline border border-grey-light cursor-pointer

	}
@tailwind utilities;

when i run npm run dev i'm i'm getting this error

 ERROR  Failed to compile with 1 errors                                                                                                              15:14:08

This dependency was not found:

* /Applications/MAMP/htdocs/myapp/resources/assets/sass/app.scss in multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

To install it, you can run: npm install --save /Applications/MAMP/htdocs/myapp/resources/assets/sass/app.scss
                                                                               Asset       Size  Chunks                    Chunk Names
  images/vendor/lightgallery.js/dist/video-play.png?4f03bd8dec67211ade8abdab39dcbf4a  819 bytes          [emitted]         
           fonts/vendor/lightgallery.js/dist/lg.eot?ecff11700aad0000cf3503f537d1df17    4.02 kB          [emitted]         
           fonts/vendor/lightgallery.js/dist/lg.ttf?4fe6f9caff8b287170d51d3d71d5e5c6    3.88 kB          [emitted]         
          fonts/vendor/lightgallery.js/dist/lg.woff?5fd4c338c1a1b1eeeb2c7b0a0967773d    3.96 kB          [emitted]         
     images/vendor/lightgallery.js/dist/loading.gif?0aeca8b09888accfccf11976b34c4e64     3.8 kB          [emitted]         
           fonts/vendor/lightgallery.js/dist/lg.svg?c066c5448562b3ccaefb6408ce4b4ae1    8.86 kB          [emitted]         
  images/vendor/lightgallery.js/dist/vimeo-play.png?699d005153517ee4264615dd1e4e2b64    1.48 kB          [emitted]         
images/vendor/lightgallery.js/dist/youtube-play.png?96bc9d7e27d077372cc0bc9524c500e6     2.7 kB          [emitted]         
                                                                          /js/app.js     1.6 MB       0  [emitted]  [big]  /js/app
                                                                   /css/app.css    2.69 MB          [emitted]         
                                                                     /js/app.js    3.24 MB          [emitted]         

ERROR in multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
Module not found: Error: Can't resolve '/Applications/MAMP/htdocs/myapp/resources/assets/sass/app.scss' in '/Applications/MAMP/htdocs/myapp'
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/hassanmansoor/.npm/_logs/2020-03-15T12_14_09_976Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/hassanmansoor/.npm/_logs/2020-03-15T12_14_09_992Z-debug.log
najems-MacBook-Pro:myapp hassanmansoor$

it looks like the @ from @apply directive is breaking the code????

any ideas on how to solve this issue ???