Tailwind CSS with Laravel cannot find import anymore with Sass

user_12288554 0
Viewed 576

I've always used this method below for my Laravel projects, but for some reason, since this month, it gives me this error now, and 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 this. 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.
tailwind-css laravel
1 Answers

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";
user_6334400
Related