Tailwindcss: Purge does not purge ALL unused classes

[nartc]

Describe the problem:

After setting up a new project (Create React App) with TailwindCSS with Purge enabled, running tailwind build ... does not purge ALL unused classes (basically none should be used since it's a brand new CRA application). Config file is as follow:

module.exports = {
  prefix: '',
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true
  },
  purge: {
    enabled: true,
    content: ['**/*.jsx', '**/*.js']
  },
  theme: {}
}

Produced CSS after tailwind build is at follow (truncated):

...
.border-collapse {
  border-collapse: collapse;
}

.border-separate {
  border-collapse: separate;
}

.rounded {
  border-radius: 0.25rem;
}
...
@-webkit-keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
...

None of the classes in the output css is used. The provided reproduction below is a Create React App but the same thing occurs for an Angular application setup.

Link to a minimal reproduction:

https://github.com/nartc/react-tailwind-purge-reproduce
Steps:

1. Clone
2. Install
3. Run npm run build:tw
4. Check tailwind.output.css file

[nartc]

I adjusted the purge.content config a little bit to target the src directory: ['./src/**/*.jsx', './src/**/*.js'] and the output css is looking better. However, there's still .table class being included in the output css even though it's unused:

[JakeNavith]

However, there's still .table class being included in the output css even though it's unused:

HTML elements are preserved by default, and since .table resembles table, it's been left in: https://github.com/tailwindlabs/tailwindcss/pull/2283

[adamwathan]

Yep @JakeNavith is right. If you want to purge everything, disable preserveHtmlElements. Careful though, now you'll lose important styles like html and body unless you also include ./public/index.html in your content array.

To remove the keyframes, you'll want to use PurgeCSS's keyframes option:

In Tailwind that looks like this:

module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true
  },
  purge: {
    enabled: true,
    content: ['public/index.html', 'src/**/*.jsx', 'src/**/*.js'],
    options: {
      keyframes: true,
    },
  },
  theme: {}
}