@tailwindcss/forms
: allow changing background svg colors
#13651
biowaffeln
started this conversation in
Ideas
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
One problem that I'm often running into when using
@tailwindcss/forms
is that the background svgs for some elements, like checkboxes or select inputs, have hard-coded colors that cannot be changed. This is annoying when creating dark mode versions or wanting to customize the colors in general.This could be solved by using the svgs via masks (see this article for reference). The idea is to create an
::after
pseudo-element, give it a background color and mask it using the svg. The user could then override the svg color by targeting the pseudo-element's background, eg:after:bg-red-500
.This is pretty neat because it allows for greater customization without having to write custom css, but it would be a breaking change as it could interfere with the user's existing pseudo-elements. Personally I'd really like to see this implemented, as this is something that I run into a lot and I believe the trade-offs are worth it.
Happy to hear the team's thoughts on this!
Beta Was this translation helpful? Give feedback.
All reactions