Tailwind CSS with Laravel cannot find import anymore with Sass

Question

I've always used this method below for my Laravel projects, but for some reason, since this month, it has given me this error. It breaks and gives me an error in the console. This same code with .postCss works, though, without any problems, and I can use Tailwind perfectly on my pages. It only happens when I use .sass.

When I run npm run watch, it gives me an error that it cannot read the import of tailwind. I've already tried to re-install node-sass and now use a version of 4.14.1, but that still doesn't solve the issue. I've tried to find this error online, but I cannot find a solution for it. Any help would be great.

webpack.mix.js

mix.sass('resources/sass/main.scss', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
]);

main.scss

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

Error

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


^
      File to import not found or unreadable: tailwindcss/base.

Answer 1

Installing Tailwind CSS using the PostCSS plugin is the correct way to use Tailwind. The following would be a much better idea by separating your SASS from your PostCSS.

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('autoprefixer'),
        require('postcss-import'),
        require('tailwindcss'),
    ])
    .sass('resources/sass/main.scss', 'public/css');

app.css

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