No color on select chevron when overriding colors in config

[tomvo]

What version of @tailwindcss/forms are you using?

0.5.8

What version of Node.js are you using?

v20.14.0

What browser are you using?

Firefox

What operating system are you using?

macOS

Reproduction repository

https://play.tailwindcss.com/IfznFpbjNy?file=config

Describe your issue

It seems strange this is happening but overriding colors in theme config removes the color for the select chevron. You can see the variable is not replaced in the SVG image of the chevron.

[tomvo]

It seems actually specifically to happen when overriding the gray-500 class. See here for a specific case: https://play.tailwindcss.com/1TWXFAuYbt?file=config

[adamwathan]

Hey! This is because you're using CSS variables in your colors. This is a limitation of CSS unfortunately — we need to use background-image to add the chevron and CSS variables aren't supported in background image URLs in CSS 😕

Best bet is to override the color of the chevron directly in your CSS with something static and not based on CSS variables like this:

https://play.tailwindcss.com/vG0gZZhzJt?file=css

@layer base {
  select:where(:not([multiple])) {
    /* %23 is an encoded '#', so 6b7280 is the hex color you want to use */
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'><path stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/></svg>");
  }
}

Going to see about defaulting to a sane color if someone uses variables though so at least the chevron doesn't disappear!

[tomvo]

Thanks for this Adam!

[adamwathan]

If you update to v0.5.9 you should at least see a chevron now!