CLI and GULP not working correctly.

[Kcko]

Im trying purgecss via two ways.

1. Via CLI with this command npx purgecss --css build.css --out build2 --content ["*.html"]
2. Via gulp

const purgecss = require('gulp-purgecss')

gulp.task('purgecss', () => {
  return gulp
    .src('build.css')
    .pipe(
      purgecss({
        content: ['index.html']
      })
    )
    .pipe(gulp.dest('build/'))
})

My HTML file (index.html):

    <header class="container border-4 p-4 bg-blue-300">
        <h1 class="text-4xl p-2 m-3 bg-orange-300 relative">Test</h1>
    </header>
    <section class="flex w-full text-2xl">
        <div class="col bg-red-200 w-1/2 p-4 text-6xl">A</div>
        <div class="col bg-green-300 w-1/5 p-4">B</div>
        <div class="col bg-green-300 w-1/6 p-4">C</div>
    </section>

and result after build?

1. CLI always ending with

canvas {
  display: block;
  vertical-align: middle;
}

/**
 * Constrain images and videos to the parent width and preserve
 * their instrinsic aspect ratio.
 *
 * https://github.com/mozdevs/cssremedy/issues/14
 */

Absolutely no used css classess are preserved.

2. Gulp works better, but some css classes still not preserved

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

.bg-red-200 {
  background-color: #fed7d7;
}

.bg-orange-300 {
  background-color: #fbd38d;
}

.bg-green-300 {
  background-color: #9ae6b4;
}

.bg-blue-300 {
  background-color: #90cdf4;
}

.border-4 {
  border-width: 4px;
}

.flex {
  display: -webkit-box;
  display: flex;
}

.m-3 {
  margin: 0.75rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-4 {
  padding: 1rem;
}

.relative {
  position: relative;
}

.text-2xl {
  font-size: 1.5rem;
}

.text-4xl {
  font-size: 2.25rem;
}

.text-6xl {
  font-size: 4rem;
}

.w-1 {
  width: 0.25rem;
}

.w-full {
  width: 100%;
}

w-1 - im not using!, why it is on the list?!
w-1/5 or w-1/2 is missing

Really strange behavior, some explanation pls? I dont really understand ...

[Kcko]

Solved! My mistakes (and my beginner level with purge css).

1. bad params ... ['index.html'] must be only index.html
   1+2 are solved by extractors thx https://github.com/FullHuman/purgecss/tree/master/examples/cli/config-file