Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow users to block generation of certain utilities #9812

Merged
merged 6 commits into from
Nov 11, 2022

Conversation

thecrypticace
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant