How install Vue JS + TailwindCss in Laravel 8.29.0

started installing plugins to my Laravel project.

• 1. Laravel new public
• 2. npm install
• 3. composer require laravel / ui
• 4. php artisan ui vue
• 5. npm install -D tailwindcss @ latest postcss @ latest autoprefixer @ latest
• 6. npx tailwindcss init
• 7. add line in tailwind.config.js purge: [ './resources//*.blade.php', './resources//.js', './resources/**/.vue', ],
• 8. add line in webpack.mix.js require ("tailwindcss"),
• 9. Add im resource / css / app.css 3-line @tailwind base; @tailwind components; @tailwind utilities;
• 10. add link stylesheet in main template file (main.blade.php) {{asset ('css / app.css')}}

After all the monipulations mentioned above, I execute the command npm install && npm run dev, and I get an error

> npm run development


> @ development D:\laravel\public
> mix


× Mix
  Compiled with some errors in 6.30s

ERROR in ./resources/js/components/ExampleComponent.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
|    <div>
|        <h3>Hey</h3>

webpack compiled with 1 error
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `mix`
npm ERR! Exit status 1
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!     C:\Users\****\AppData\Roaming\npm-cache\_logs\2021-02-26T09_06_38_033Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 1
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!     C:\Users\***\AppData\Roaming\npm-cache\_logs\2021-02-26T09_06_38_066Z-debug.log