Placeholder color not compatible with css variables

[maxsalven]

What version of @tailwindcss/forms are you using?

0.5.3

What version of Node.js are you using?

16

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction repository

https://play.tailwindcss.com/zD1WjAfQbs

Describe your issue

If you use a CSS variable for color-gray-500 with the modern alpha value friendly syntax, then the generated placeholder color still contains the '\' string, and will render as black:

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --color-gray-500: 150 150 150;
}

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        gray: {
          500: 'rgb(var(--color-gray-500) / <alpha-value>)',
        },
      },
    },
  },
  plugins: [require('@tailwindcss/forms')],
}

<input type="text" placeholder="example" />
<div class="bg-gray-500">Example</div>

[RobinMalfait]

Hey! Thank you for your bug report! Much appreciated! 🙏

This should be fixed by #132, and will be available in the next release.

You can already try it by using the insiders build npm install @tailwindcss/forms@insiders.

[mikeb-hm]

I'm still having an issue despite the fix with the chevron from the form-select class. When the color is defined as a static hex value everything is fine, but when using variables I get a SVG like this as a result: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 22'%3e%3cpath stroke='rgb(var(--gray-500) / var(--tw-stroke-opacity%2c 1))' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")

The chevron with this SVG will not show up at least for me in the newest version of Chrome in Linux.

[arjen-mediasoep]

I'm still having an issue despite the fix with the chevron from the form-select class. When the color is defined as a static hex value everything is fine, but when using variables I get a SVG like this as a result: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 22'%3e%3cpath stroke='rgb(var(--gray-500) / var(--tw-stroke-opacity%2c 1))' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")

The chevron with this SVG will not show up at least for me in the newest version of Chrome in Linux.

I've got the exact same issue with the latest package version. Any workaround/fix available, @RobinMalfait?