Change Generated Classes

Configuration

Tailwind generates a lot of CSS classes, and we may want to limit that list for performance reasons to make the CSS bundle smaller—or to make it easier to understand the set of possibilities.

We can specify which set of core plug-ins Tailwind should generate in either of two ways. Most likely, we will only want to eliminate a few core plug-ins. We can then create a block list by passing an object to the corePlugins key of the configuration. The keys of this object are the name of core plug-ins we want to eliminate, and the values are all false:

module.exports = {
  corePlugins: {
    flex: false,
    flexDirection: false,
    flexGrow: false,
    flexShrink: false,
    flexWrap: false,
  } 
}

This configuration eliminates all the flexbox-related tools, though it is not recommended.

If we want an inclusion list instead, pass an array of the list of core plugins we want. This configuration includes only the flex utilities in Tailwind:

module.exports = {
  corePlugins: [
    flex,
    flexDirection,
    flexGrow,
    flexShrink,
    flexWrap,
  ] 
}

Note: We do not recommend doing exactly that, either—the other utilities are also useful.

Configure variant prefixes

We have seen variant prefixes in Tailwind, such as hover and focus, and Tailwind defines about a dozen or so potential prefixes, but most of them are not enabled by default. The screen-size prefixes work with all the core plugins. The hover, focus, and dark prefixes are enabled on a subset of core plugins that we would most likely use. We’ll never notice that they are not enabled everywhere in most cases. The full list of variants by plug-in is available in the Tailwind documentation.