Allow users to block generation of certain utilities

[thecrypticace]

Sometimes you're generating classes that you don't want to generate because they're matched in your content.

For example, we have a container class. If your content has the word container in it somewhere that's not meant to be an actual class we would still generate it.
Another case is you have a class like collapse that is shared by Tailwind CSS and another framework that you're using and the behavior between the two is different.

Historically, we've recommended disabling the core plugin that generates these classes and then either adding custom CSS or a plugin to your own config that generates the classes you want.

For example, to disable the collapse utility you would add this to your config:

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.html",
  ],
  theme: {
    extend: {},
  },
  corePlugins: {
    // 1. Disable the `collapse` utility *and* all other `visibility` utilities
    visibility: false,
  },
  plugins: [
    // 2. Re-add the needed `visibility` utilities
    function ({ addUtilities }) {
      addUtilities({
        '.visible': { visibility: 'visible' },
        '.invisible': { visibility: 'hidden' },
      })
    },
  ],
}

However, this solution is less than ideal because the resulting CSS will be in a different order and you have to replicate most of the core plugin in your own config file.

Here we're introducing a new blocklist option that allows you to selectively disable generation of utilities that you do not want. For the situation above, with the collapse utility, you would now add this to your config:

// tailwind.config.js
module.exports = {
  // 1. Disable generation of the `collapse` utility ONLY
  blocklist: ['collapse'],
  content: [
    "./src/**/*.html",
  ],
  theme: {
    extend: {},
  },
}

The utilities are matched by their exact class names. This means that if you want to block hover:mx-auto you would add hover:mx-auto to the blocklist. Simply including mx-auto on it's own will not prevent variants from being generated if they are matched.

Note
This blocklist does NOT affect user CSS, so if you have a class like collapse in your own CSS (or coming from another library you are using) it will still be included in the output.