implement purge safelist (#4580)

* fix --help output in tests

* add tests to ensure we can use `purge.safelist`

* implement the `purge.safelist` for strings

* proxy `purge.safelist` to `purge.options.safelist`

This allows us to have a similar API in `AOT` and `JIT` mode.

* only proxy `purge.safelist` to `purge.options.safelist` if
`purge.options.safelist` doesn't exists yet.

integrations/tailwindcss-cli/tests/cli.test.js

@@ -172,7 +172,7 @@ describe('Build command', () => {
          -o, --output             Output file
          -w, --watch              Watch for changes and rebuild as needed
              --jit                Build using JIT mode
-             --files              Template files to scan for class names
+             --purge              Content paths to use for removing unused classes
              --postcss            Load custom PostCSS configuration
          -m, --minify             Minify the output
          -c, --config             Path to a custom config file

integrations/tailwindcss-cli/tests/integration.test.js

@@ -25,6 +25,58 @@ describe('static build', () => {
       `
     )
   })
+
+  it('should safelist a list of classes to always include', async () => {
+    await writeInputFile('index.html', html`<div class="font-bold"></div>`)
+    await writeInputFile(
+      '../tailwind.config.js',
+      javascript`
+        module.exports = {
+          purge: {
+            content: ['./src/index.html'],
+            safelist: ['bg-red-500','bg-red-600']
+          },
+          mode: 'jit',
+          darkMode: false, // or 'media' or 'class'
+          theme: {
+            extend: {
+            },
+          },
+          variants: {
+            extend: {},
+          },
+          corePlugins: {
+            preflight: false,
+          },
+          plugins: [],
+        }
+      `
+    )
+
+    $('node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css', {
+      env: { NODE_ENV: 'production' },
+    })
+
+    await waitForOutputFileCreation('main.css')
+
+    expect(await readOutputFile('main.css')).toIncludeCss(
+      css`
+        .bg-red-500 {
+          --tw-bg-opacity: 1;
+          background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
+        }
+
+        .bg-red-600 {
+          --tw-bg-opacity: 1;
+          background-color: rgba(220, 38, 38, var(--tw-bg-opacity));
+        }
+
+        .font-bold {
+          font-weight: 700;
+        }
+      `
+    )
+  })
 })
 
 describe('watcher', () => {