Add support for important in v4

[thecrypticace]

This PR allows modifying utility output by wrapping all utility declarations in a custom selector or marking all utility declarations as !important. This is the v4 equivalent to the important option in the tailwind.config.js file.

Mark all utility declarations as !important

To add !important to all utility declarations, you add an important flag after the @import statement for tailwindcss or tailwindcss/utilities:

/** Importing `tailwindcss` */
@import "tailwindcss" important;

/** Importing the utilities directly */
@import "tailwindcss/utilities" important;

Example utility output:

.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.text-center {
  text-align: center !important;
}

This is equivalent to adding important: true to the tailwind.config.js file — which is still supported for backwards compatibility.

Wrap all utility declarations in a custom selector

For backwards compatibility, if you need to nest all utilities in an #app selector you add important: "#app" to your config file:

export default {
  important: "#app",
  // …
}

This does not bring back support for the respectImportant flag in addUtilities / matchUtilities.

[philipp-spiess]

This all seems easy enough, just one question inline. Happy to stamp it but I feel like this could benefit from someone else's 👀 too!