Problem compiling SASS with Laravel Mix and Tailwind - laravel

Question

I am trying to compile SASS files in my mix.config.js, but I have not succeeded.
talwind.config.js
const primaryColors = require("./colors");
module.exports = {
purge: [
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./resources/**/*.vue',
],
darkMode: "class",
theme: {
borderColor: theme => ({
...theme("colors"),
DEFAULT: primaryColors.gray["300"]
}),
extend: {
colors: {
...primaryColors,
theme: {
1: "#1C3FAA",
2: "#F1F5F8",
3: "#2E51BB",
4: "#274AB7",
5: "#DEE7EF",
6: "#D32929",
7: "#365A74",
8: "#D2DFEA",
9: "#91C714",
10: "#3160D8",
11: "#F78B00",
12: "#FBC500",
13: "#7F9EB9",
14: "#E6F3FF",
15: "#8DA9BE",
16: "#607F96",
17: "#FFEFD9",
18: "#D8F8BC",
19: "#2449AF",
20: "#395EC1",
21: "#C6D4FD",
22: "#E8EEFF",
23: "#1A389F",
24: "#163296",
25: "#C7D2FF",
26: "#15329A",
27: "#203FAD",
28: "#BBC8FD",
29: "#284EB2",
30: "#98AFF5"
}
},
fontFamily: {
roboto: ["Roboto"]
},
container: {
center: true
},
maxWidth: {
"1/4": "25%",
"1/2": "50%",
"3/4": "75%"
},
screens: {
sm: "640px",
md: "768px",
lg: "1024px",
xl: "1280px",
xxl: "1600px"
},
strokeWidth: {
0.5: 0.5,
1.5: 1.5,
2.5: 2.5
}
}
},
variants: {
extend: {
zIndex: ["responsive", "hover"],
position: ["responsive", "hover"],
padding: ["responsive", "last"],
margin: ["responsive", "last"],
borderWidth: ["responsive", "last"],
backgroundColor: ["last", "first", "odd", "responsive", "hover", "dark"],
borderColor: ["last", "first", "odd", "responsive", "hover", "dark"],
textColor: ["last", "first", "odd", "responsive", "hover", "dark"],
boxShadow: ["last", "first", "odd", "responsive", "hover", "dark"],
borderOpacity: ["last", "first", "odd", "responsive", "hover", "dark"],
backgroundOpacity: ["last", "first", "odd", "responsive", "hover", "dark"]
}
}
};
webpack.config.js
const path = require('path');
module.exports = {
resolve: {
alias: {
'#': path.resolve('resources/js'),
},
}
};
webpack.mix.js
const mix = require('laravel-mix');
require('laravel-mix-postcss-config');
const tailwindcss = require('tailwindcss')
mix.js('resources/js/app.js', 'public/dist/js')
.sass('resources/js/assets/sass/app.scss', 'public/dist/css', {}, [
require('tailwindcss')
])
.options({
processCssUrls: false,
postCss: [
tailwindcss('./tailwind.config.js'),
]
})
.autoload({ 'cash-dom': ['$', 'cash'] })
.copyDirectory('resources/js/assets/images', 'public/dist/images')
.copyDirectory('node_modules/summernote/dist/font/summernote.woff', 'public/dist/fonts/summernote')
.browserSync({
proxy: 'evpiu.test',
files: ['resources/**/*.*']
}).webpackConfig(require('./webpack.config'));
if (mix.inProduction()) {
mix.version();
}
I'm getting the following error. Does anyone have an idea how to fix this? I have not been able to get it to work in any way. I am not a Laravel mix Expert, so it is a big problem for me.

Answer 1

From what the error says, I think you are not suppose to add "dark" to the variants -> extend.