# Introduction

[PurgeCSS](https://github.com/FullHuman/purgecss) is a tool to remove unused CSS. It can be used as part of your development workflow. PurgeCSS comes with a JavaScript API, a CLI, and plugins for popular build tools.

Here are a couple of ways to use PurgeCSS:

* [CLI](#cli)
* [JavaScript API](#javascript-api)
* [Webpack](#webpack)
* [PostCSS](#postcss)
* [Gulp](#gulp)
* [Grunt](#grunt)
* [Rollup](#rollup)

## CLI

You can install the CLI in two ways. By installing PurgeCSS globally or using npx.

### Install globally

```bash
npm i -g purgecss
```

Run PurgeCSS from the terminal:

```bash
purgecss --css <css> --content <content> [option]
```

### Use npx

[npx](https://www.npmjs.com/package/npx) allows you to run the CLI locally without installing the package globally.

Install PurgeCSS as a dev dependency:

```bash
npm i -D purgecss
```

Run PurgeCSS from the terminal:

```bash
npx purgecss --css <css> --content <content> [option]
```

## JavaScript API

Install PurgeCSS as a dev dependency:

```bash
npm i -D purgecss
```

### ES6 with import

```javascript
import Purgecss from 'purgecss'
const purgecss = new Purgecss({
  content: ['**/*.html'],
  css: ['**/*.css']
})
const purgecssResult = purgecss.purge()
```

### ES5 with require

```javascript
var Purgecss = require('purgecss')
var purgecss = new Purgecss({
  content: ['**/*.html'],
  css: ['**/*.css']
})
var purgecssResult = purgecss.purge()
```

## Webpack

Install the Webpack plugin as a dev dependency:

```bash
npm i -D purgecss-webpack-plugin
```

Use the plugin in your Webpack config:

```javascript
const path = require('path')
const glob = require('glob')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const PurgecssPlugin = require('purgecss-webpack-plugin')

const PATHS = {
  src: path.join(__dirname, 'src')
}

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader?sourceMap'
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('[name].css?[hash]'),
    new PurgecssPlugin({
      paths: glob.sync(`${PATHS.src}/*`)
    })
  ]
}
```

## PostCSS

Install the PostCSS plugin as a dev dependency:

```bash
npm i -D @fullhuman/postcss-purgecss
```

Use the plugin in your PostCSS config:

```javascript
const purgecss = require('@fullhuman/postcss-purgecss')

module.exports = {
  plugins: [
    purgecss({
      content: ['./**/*.html']
    })
  ]
}
```

## Gulp

Install the Gulp plugin as a dev dependency:

```bash
npm i -D gulp-purgecss
```

Use the plugin in your Gulpfile:

```javascript
const gulp = require('gulp')
const purgecss = require('gulp-purgecss')

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

## Grunt

Install the Grunt plugin as a dev dependency:

```bash
npm i -D grunt-purgecss
```

Use the plugin in your Gruntfile:

```javascript
module.exports = grunt => {

  grunt.initConfig({
    purgecss: {
      options: {
        content: ['./src/**/*.html']
      },
      my_target: {
        files: {
          './dist/app.purged.css': './src/app.css'
        }
      }
    }
  })

  grunt.loadNpmTasks('grunt-purgecss')
  grunt.registerTask('default', ['purgecss'])
}
```

## Rollup

Install the Rollup plugin as a dev dependency:

```bash
npm i -D rollup-plugin-purgecss
```

Use the plugin in your Rollup config:

```javascript
import { rollup } from 'rollup'
import purgecss from 'rollup-plugin-purgecss'

rollup({
  entry: 'main.js',
  plugins: [
    purgecss({
      content: ['index.html']
    })
  ]
})
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://v1.purgecss.com/master.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.