[v1.4] Turning off opacity in corePlugins config still generates CSS variables

[pheuter]

The generated CSS file has increased substantially in size (~40%) as a result and I can't seem to turn it off.

tailwind.config.js

corePlugins: {
    divideOpacity: false,
    backgroundOpacity: false,
    borderOpacity: false,
    placeholderOpacity: false,
    textOpacity: false
}

Generated CSS

a {
  --text-opacity: 1;
  color: rgba(255, 128, 153, var(--text-opacity));
}

.divide-black > :not(template) ~ :not(template){
  --divide-opacity: 1;
  border-color: rgba(51, 51, 51, var(--divide-opacity));
}

.bg-black{
  --bg-opacity: 1;
  background-color: rgba(51, 51, 51, var(--bg-opacity));
}

[emptynick]

Same here.
Disabling the core-modules only removes the corresponding classes .bg-opacity-*, .text-opacity-* and so on.

Seems like there should be a check here (and the other plugins):
https://github.com/tailwindcss/tailwindcss/blob/e52c59a7588a17c04c250fc3d41c182678895061/src/plugins/backgroundColor.js#L23-L27
if the the corresponding opacity-plugin (in this case backgroundOpacity) is enabled or not.
If not, just return the old version

{
  'background-color': value,
}

Or use ie11 as the target for now

[adamwathan]

I think we can improve this for sure by adding some API to the plugin system to allow checking if a given plugin is enabled. For now I'd recommend what @emptynick suggested and use the ie11 target mode for the color plugins:

target: ['relaxed', {
  backgroundColor: 'ie11',
  textColor: 'ie11',
  borderColor: 'ie11',
  placeholderColor: 'ie11',
  divideColor: 'ie11',
}]

[ryanfitzer]

Where is target documented? I'm not seeing it on the Configuration page.

[emptynick]

In the release notes and in the PR.
Its experimental and (I guess) therefore not yet documented

[ryanfitzer]

Question: for the browserslist target, I've tried the following approaches that all evaluate to these browser versions, but I still get custom properties in the output:

1. browserslist key in package.json.
2. .browserslistrc config file.
3. browserslist config file.

The only thing that works is using target: 'ie11'. Is the browserslist target not in 1.4.1?

[adamwathan]

Fixed in v1.4.3 👍

[adamwathan]

@ryanfitzer Crap good catch, it was only working using the tuple syntax (['browserslist', {...}]). I've just published a fix in v1.4.4 👍

[nunong21]

@adamwathan I was wondering if this fix still applies to version 2 of Tailwind.
I was trying to use it in IE but the opacity variable is blocking my colors

[adamwathan]

As of v2.0, Tailwind CSS is designed for and tested on the latest stable versions of Chrome, Firefox, Edge, and Safari. Tailwind CSS v2.0 does not support any version of IE, including IE 11.

https://tailwindcss.com/docs/browser-support

[nunong21]

@adamwathan Yes, I've read that and a lot more posts about it.
Even tho IE should die, we still have a couple thousand that use our SAAS in old browser like IE8.

After a couple tests the only thing that I didn't manage to get working was the colors, only for this reason.
Even if I set in my config that I don't want to use opacity, I still end up with a variable on my RGBa.

This is the problem of having to support IE unfortunately...
I've been using Tailwind also on other projects and so far it's been great! Really well done!