Alpha-less colors

[ayrton]

What version of @tailwindcss/jit are you using?

0.1.18

What version of Node.js are you using?

14.x

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

postcss@^8.2.0

What browser are you using?

N/A

What operating system are you using?

macOS

Reproduction repository

N/A

When certain core plugins have been disabled (eg. backgroundOpacity) tailwind-jit does not output alpha-less colors like tailwind does.

Is this is an intended breaking change or missing functionality? Happy to contribute if there is interest in supporting this use case.

Implementation difference:
tailwind-jit vs. tailwind

Example

With the following config:

module.exports = {
  corePlugins: {
    backgroundOpacity: false,
  },
}

Outcome:

.bg-gray-100{
	--tw-bg-opacity: 1;
	background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
}

Expected outcome:

.bg-gray-100{
	background-color: #F3F4F6;
}

[ayrton]

An example where this matters is css compilation for email/newsletter templates. As a temporary fix I've also disabled the backgroundColor core plugin and defined those selectors myself.

[adamwathan]

Yeah I think we should support this if only because it makes the CSS output smaller for folks who don't need it. Would love a PR for it 👍🏻

[ayrton]

Yeah I think we should support this if only because it makes the CSS output smaller for folks who don't need it. Would love a PR for it 👍🏻

Sweet. I'll take a stab at it

[ayrton]

Opened PR in tailwindlabs/tailwindcss-jit#196

[ayrton]

Re-opened PR in this repo after jit was merged in #3984