Replace modern rgba() notation in Tailwind CSS to support legacy browsers-CodePudding

Contemporary versions of Tailwind CSS v3 builds colours into rgb space-slash colour notation that isn't supported by a legacy browser (Safari 11) that my web app now needs to support.

e.g. rgb(163 160 158 / var(--tw-bg-opacity)

The problems are the space separators and the / opacity syntax.

I couldn't find anything in the Tailwind CSS docs re: config or options on this. I have previously overcome this by adding on a regex perl opertation to replace these and build.

npm run build && perl -pi -w -e 's/rgba?\\(\\s*\\d )(\\s*\\s*\\d )(\\s*\\s*\\d ) \\//rgba($1,$2,$3,/g)' dist/assets/index.*.css

The CI/CD deployment does not like this, and I feel like this is not the right way to deal with this.

Does anyone know a better way to do this? What would be a more elegant way to replace these?

I do not make use of background-opacity if that makes things easier.

Thanks in advance.

CodePudding user response：

If you don't need to use background-opacity, you can disable it by adding this option to your tailwind.config.js:

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

I found the source in Tailwind v2, which doesn't appear in the current version but still works on it (Tailwind v3): docs.

For example, for the bg-red-400 utility:

<div >Background</div>

The generated class would be:

.bg-red-400 {
    background-color: #f87171;
}

Instead of:

background-color: rgb(248 113 113 / var(--tw-bg-opacity));

Tailwind-play