Remove deprecated Tailwind utilities, replace with equivalent alternatives

[Mlekar]

Replaces old deprecated utility classes (bg-opacity-* and ring-opacity-*) used with Tailwind v3.x with the modern alternatives used in v4.x, listed under the upgrade guide here: https://tailwindcss.com/docs/upgrade-guide

closes #441

[Applejack21]

Would love to see this get merged. We're having to wait for this to be done so we can port over our projects to tailwind v4.x so we don't have to add in deprecated classes.

[Mlekar]

If you want, you can currently just make your own multiselect.css file and import that one instead of using the @vueform/multiselect/themes/tailwind.css import from the package (you can copy over the CSS from the updated tailwind.css or tailwind.scss file in this pull request). Works fine until this gets merged :)

[mrleblanc101]

Missing background migration:

const svgToDataUri = require('mini-svg-data-uri') module.exports = { theme: { extend: { backgroundImage: (theme) => ({ 'multiselect-caret': `url("${svgToDataUri(  `<svg viewBox="0 0 320 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg>`,  )}")`, 'multiselect-spinner': `url("${svgToDataUri(  `<svg viewBox="0 0 512 512" fill="${theme('colors.green.500')}" xmlns="http://www.w3.org/2000/svg"><path d="M456.433 371.72l-27.79-16.045c-7.192-4.152-10.052-13.136-6.487-20.636 25.82-54.328 23.566-118.602-6.768-171.03-30.265-52.529-84.802-86.621-144.76-91.424C262.35 71.922 256 64.953 256 56.649V24.56c0-9.31 7.916-16.609 17.204-15.96 81.795 5.717 156.412 51.902 197.611 123.408 41.301 71.385 43.99 159.096 8.042 232.792-4.082 8.369-14.361 11.575-22.424 6.92z"></path></svg>`,  )}")`, 'multiselect-remove': `url("${svgToDataUri(  `<svg viewBox="0 0 320 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"></path></svg>`,  )}")`, }) }, } }

The lazy way:

 .bg-multiselect-caret { background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20320%20512%22%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M31.3%20192h257.3c17.8%200%2026.7%2021.5%2014.1%2034.1L174.1%20354.8c-7.8%207.8-20.5%207.8-28.3%200L17.2%20226.1C4.6%20213.5%2013.5%20192%2031.3%20192z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E'); } .bg-multiselect-spinner { background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22%24%7Btheme('colors.green.500')%7D%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M456.433%20371.72l-27.79-16.045c-7.192-4.152-10.052-13.136-6.487-20.636%2025.82-54.328%2023.566-118.602-6.768-171.03-30.265-52.529-84.802-86.621-144.76-91.424C262.35%2071.922%20256%2064.953%20256%2056.649V24.56c0-9.31%207.916-16.609%2017.204-15.96%2081.795%205.717%20156.412%2051.902%20197.611%20123.408%2041.301%2071.385%2043.99%20159.096%208.042%20232.792-4.082%208.369-14.361%2011.575-22.424%206.92z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E'); } .bg-multiselect-remove { background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20320%20512%22%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M207.6%20256l107.72-107.72c6.23-6.23%206.23-16.34%200-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58%200L160%20208.4%2052.28%20100.68c-6.23-6.23-16.34-6.23-22.58%200L4.68%20125.7c-6.23%206.23-6.23%2016.34%200%2022.58L112.4%20256%204.68%20363.72c-6.23%206.23-6.23%2016.34%200%2022.58l25.03%2025.03c6.23%206.23%2016.34%206.23%2022.58%200L160%20303.6l107.72%20107.72c6.23%206.23%2016.34%206.23%2022.58%200l25.03-25.03c6.23-6.23%206.23-16.34%200-22.58L207.6%20256z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E'); }