0

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

https://imgur.com/a/SMnlWxk

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,
});

1 Answer 1

6

yarn add fast-glob -D and then or npm i fast-glob -D

module.exports = {
content: require('fast-glob').sync([
    './**/*.php'
]),
theme: {
    extend: {},
},
plugins: [],

https://tailwindcss.com/docs/content-configuration#styles-rebuild-in-an-infinite-loop

1
  • Thanks for your contribution, but with this solution new files aren't be detected and require restart the process...
    – vguerrero
    May 13, 2022 at 8:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.