Problem is when I run npm run watch
in console constantly looping. My CPU will explode.
I found problem is in tailwind.config.js file.
purge: [
'**/*.+(html|php)',
'partials/*.+(html|php)',
'*.php',
'*.html'
],
Problem is with these paths, so for some reason works fine for this path who starting with folder name partials, other 3 are problem. If I set to start with parent folder name, can't watch these files and my Tailwind broke
TAILWIND tailwind.config.js
module.exports = {
purge: [
'**/*.+(html|php)',
'partials/*.+(html|php)',
'*.php',
'*.html'
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
colors: {
primary: '#15192B',
secondary: '#2EAEE4',
neutral: '#436576',
white: '#fff',
black: '#000'
}
},
variants: {
extend: {},
},
plugins: [
function ({ addComponents }) {
addComponents({
'.container': {
maxWidth: '100%',
'@screen sm': {
maxWidth: '640px',
},
'@screen md': {
maxWidth: '768px',
},
'@screen lg': {
maxWidth: '1300px',
},
}
})
}
],
}
LaravelMix webpack.mix.js
let mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
mix.js('assets/src/js/index.js', 'assets/dist/dist-index.js');
mix.sass('assets/src/sass/style.scss', 'assets/dist/dist-style.css');
mix.options({
postCss: [ tailwindcss('./tailwind.config.js') ],
});
mix.copyDirectory('assets/src/media/', 'assets/dist/media/');
mix.browserSync({
watch: true,
files: [
'assets/src/js/*',
'assets/src/sass/*',
'assets/src/sass/**/*',
'**/*.+(html|php)',
'*.php'
],
proxy: 'site.local',
host: 'site.local',
open: 'external',
reloadDelay: 0,
});