Hi, I'm trying to use TailwindCSS for my project but I'm having trouble getting Laravel Mix to work. My error message is like this:
ERROR Failed to compile with 2 errors 11:56:10 PM
These dependencies were not found:
* /Users/hjorturfreyrlarusson/websites/nfs/resources/assets/js/app.js in multi ./resources/assets/js/app.js ./resources/assets/sass/index.sass
* /Users/hjorturfreyrlarusson/websites/nfs/resources/assets/sass/index.sass in multi ./resources/assets/js/app.js ./resources/assets/sass/index.sass
To install them, you can run: npm install --save /Users/hjorturfreyrlarusson/websites/nfs/resources/assets/js/app.js /Users/hjorturfreyrlarusson/websites/nfs/resources/assets/sass/index.sass
Asset Size Chunks Chunk Names
/js/app.js 732 bytes 0 [emitted] /js/app
ERROR in multi ./resources/assets/js/app.js ./resources/assets/sass/index.sass
Module not found: Error: Can't resolve '/Users/hjorturfreyrlarusson/websites/nfs/resources/assets/js/app.js' in '/Users/hjorturfreyrlarusson/websites/nfs'
@ multi ./resources/assets/js/app.js ./resources/assets/sass/index.sass
ERROR in multi ./resources/assets/js/app.js ./resources/assets/sass/index.sass
Module not found: Error: Can't resolve '/Users/hjorturfreyrlarusson/websites/nfs/resources/assets/sass/index.sass' in '/Users/hjorturfreyrlarusson/websites/nfs'
@ multi ./resources/assets/js/app.js ./resources/assets/sass/index.sass
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ production: `cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ production 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/hjorturfreyrlarusson/.npm/_logs/2019-01-04T23_56_10_443Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ prod: `npm run production`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ prod 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/hjorturfreyrlarusson/.npm/_logs/2019-01-04T23_56_10_471Z-debug.log
and my Laravel Mix file looks like this:
const mix = require('laravel-mix');
var tailwindcss = require('tailwindcss');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/index.sass', 'public/css')
.options({
processCssUrls: false,
postCss: [ tailwindcss('./tailwind.js') ],
});
Try using the package laravel-mix-tailwind.
npm install laravel-mix-tailwind --save-dev
And in webpack.mix.js
let mix = require('laravel-mix');
require('laravel-mix-tailwind');
mix
.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.tailwind();
Make sure resources/assets/sass/index.sass exists...I also think processCssUrls might be messing with your pathing in your sass file and is causing the error...try removing the processCssUrls option altogether and seeing if you can compile
Got it to work like this:
let mix = require('laravel-mix');
let tailwindcss = require('tailwindcss');
mix
.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.sass', 'public/css')
.options({
processCssUrls: false,
postCss: [ tailwindcss('./tailwind.js') ],
})
.browserSync({
proxy: 'project.test',
notify: {
styles: {
top: 'auto',
bottom: '20px'
}
}
});
PS. You don't need the .browserSync to get this to work.
Please or to participate in this conversation.