[Bug]: Important modifier not working

[jaulz]

What version of Tailwind CSS are you using?

2.1.2

What build tool (or framework if it abstracts the build tool) are you using?

vue-tailwind 2.2.1, webpack 5.21.2

What version of Node.js are you using?

v15.11.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction repository

https://play.tailwindcss.com/qVS5lsqxMS

Describe your issue

The important modifier does not work as announced here:
https://tailwindcss.com/docs/just-in-time-mode

The attached reproduction link should have a blue background but it is still gray:

[bradlc]

Have you enabled JIT mode as described in the documentation? JIT mode is not currently supported in Tailwind Play, and you are using jit: true there instead of mode: 'jit'.

If you have enabled JIT mode correctly and it's still not working please provide a repository which reproduces the issue, thanks!

[Zertz]

We're running into this with mode: "jit" and @tailwindcss/postcss7-compat:

Input:

.ui-state-active {
    @apply !bg-none !whitespace-normal;
}

Output:

.ui-state-active {
    white-space: normal;
    background-image: none;
}

However, if I inline !whitespace-normal, it works as expected:

[adamwathan]

To make utilities important with @apply you need to add the !important keyword to the end of the list:

.ui-state-active {
    @apply bg-none whitespace-normal !important;
}

This is something we could probably improve now that there's a dedicated important modifier though.

[adamwathan]

Added support for this, will be in v2.2 but can test now in canary:

npm install -D tailwindcss@canary