[JIT] Disabling opacity core plugins doesn't change output of color plugins

[cossssmin]

What version of Tailwind CSS are you using?

v2.1.1

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

Maizzle v3.3.0

What version of Node.js are you using?

v14.15.1

What browser are you using?

Chrome

What operating system are you using?

Windows 10

Reproduction repository

https://github.com/maizzle/maizzle

Describe your issue

When enabling JIT, you cannot disable core plugins:

module.exports = {
  mode: 'jit',
  purge: [
    'src/**/*.*',
  ],
  corePlugins: {
    textOpacity: false,
  },
}

<div class="text-red-400">example</div>

Result:

.text-red-400 {
  --tw-text-opacity: 1;
  color: rgba(248, 113, 113, var(--tw-text-opacity));
}

Expected:

.text-red-400 {
  color: #f87171;
}

Note I've only tested with the opacity plugins.

[iangraf]

I have the same problem. I need to continue to support IE11, which does not support CSS variables. I am able to use Tailwind 2 with the opacity utils disabled (and avoiding a few other utils that use CSS variables), but cannot use JIT mode because there is currently no way to disable the opacity utils.

[adamwathan]

Hey! You actually can disable core plugins, it's just that disabling textOpacity doesn't change the output of the textColor plugin like it does in the classic engine. The text-opacity-{x} utilities themselves are not generated though, so disabling core plugins does work.

Generally I am hesitant to make changes that in any way indicate we are attempting to support IE11 because we definitely don't and will not ever support it, but for this specific issue there is an open PR here which I plan to merge if only to reduce the file size:

#3984

You'll run into this same problem in other spots though, like even box-shadow won't work in IE11 because of our use of CSS custom properties and I just don't think I can personally prioritize making changes to make that work in IE11 when we explicitly don't support it.

[iangraf]

Thank you Adam! This is exactly what I was hoping for. I understand that v2 does not support IE11, so I have no other expectations for workarounds for IE11.

[cossssmin]

Thanks Adam, looking forward to that PR!

Right now I'm enabling JIT only locally so that production builds output HEX values that will work in HTML email. The box-shadow thing, I already solved with tailwindcss-box-shadow in case others need something like that 👍

[adamwathan]

This is working as expected on master now, can check the canary build to test it out:

npm install -D tailwindcss@canary

Will be available proper in v2.2 👍🏻

[iangraf]

Thank you Adam! I'm using Vue CLI so I will need to wait for the proper release PostCSS 7 compat build to check it out.