Browser support is reduced by using rgb/opacity convention, maybe should favor rgba convention for legacy and modern browsers

What version of Tailwind CSS are you using?

v3.0.18

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

Next.js 12.1.0

What version of Node.js are you using?

v12.19.0

What browser are you using?

Safari

What operating system are you using?

iOS

Reproduction URL

Background and font-color using rgb/opacity convention - https://play.tailwindcss.com/l1lAppmgGz?file=config Disabling backgroundOpacity and textOpacity makes it use hex but we lose opacity ability - https://play.tailwindcss.com/K1AcJBUjDP?file=config

Describe your issue

With the *Opacity core plugins enabled, rgb/opacity convention is used for colors. Older browser don’t support this format. Please use rgba convention as that is backwards and forwards compatible.

[flyfinec]

@adamwathan postcss-color-rgb I tried it and it doesn’t work, maybe it’s the reason why postcss 8 is not supported, this library has not been updated for a long time

@Noitidart, try postcss-preset-env https://github.com/csstools/postcss-preset-env https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-functional-notation

1. npm install postcss-preset-env --save-dev
2. Add plugin configuration to postcss.config.js, like:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    'postcss-preset-env': {
      browsers: 'chrome >= 50', // configure a compatible browser version
    },
  },
};

If you use nextjs, delete the .next directory first, and then execute npm run dev to test

The plugin for postcss-preset-env will automatically convert CSS Colors 4 notation to compatible notation:

css colors 4 notation:
rgb(245 247 255 / var(--tw-bg-opacity))

compatible notation:
rgba(245, 247, 255, var(--tw-bg-opacity))

Hope it helps you

[Noitidart]

Thank you @flyfinec I was still struggling with this, I will try that out later this week thank you!