How to use Tailwind CSS together with SCSS in Laravel/Vue project?

Question

I'm trying to install tailwind css from this guide into an existing laravel/vue project, which uses scss.

1. install packages

   yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
   

2. create tailwind.config.js

   npx tailwindcss init
   

3. add tailwind to webpack.mix.js

   const mix = require('laravel-mix');
   const path = require('path');
   
   mix.js('resources/js/app.js', 'public/js')
       .postCss("resources/css/app.css", "public/css", [require("tailwindcss")])
       .alias({'@': 'resources/'})
       .webpackConfig({resolve: {alias: {'@': path.resolve('resources/')}}})
       .vue()
       .version()
       .browserSync('127.0.0.1:8000');
   

4. add tailwind to css. Where do I add it, if my scss filewatcher is compiling the css files of my project? I've tried to put:

   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   

or

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

into app.scss but tailwind classes do not affect Vue components. I've also tried importing it into app.vue which did not work either. The tailwind classes are correctly displayed in the editor dialogue and browser DOM but the css props don't get rendered.

Edit:

I've added this to tailwindcss.config.js but the css still does not get rendered in the browser:

module.exports = {
    content: [
        './resources/views/*.blade.php',
        './resources/js/*.js',
        './resources/vue/**/*.vue',
        './resources/vue/*.vue',
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

Answer 1

In your resources/css/app.css, Add below code (Do not add to app.scss.)

@tailwind base;
@tailwind components;
@tailwind utilities; 

And add below code to your welcome.blade.php

<link href="{{ asset('css/app.css') }}" rel="stylesheet">