Background colors on check boxes and and radio buttons not configuring from tailwind.config..s

[roni-estein]

when manipulating default forms for a site, I've noticed that I can hard code it in html with something like text-indigo-500, however I can't apply that in tailwind config.js.

Code snippet:

theme: {
    customForms: theme => ({
      default: {
        'input, textarea, multiselect, select': {
          borderRadius: theme('borderRadius.none'),
          borderColor: theme('colors.gray.400'),
          borderWidth: theme('width.px'),
          fontSize: theme('fontSize.sm'),
          boxShadow: theme('boxShadow.md'),
          paddingTop: theme('padding.3'),
          paddingBottom: theme('padding.3'),
        },
        checkbox: {
          borderColor: theme('colors.gray.500'), //<- will work
          textColor: theme('colors.indigo.500'),  //<-wont change the selected state 
                                                                              //bg color of the check or radio
          height: theme('height.5'),
          width: theme('width.5'),
          boxShadow: theme('boxShadow.md'),
        },
        radio: {
          borderColor: theme('colors.gray.500'),
          boxShadow: theme('boxShadow.md'),
          height: theme('height.5'),
          width: theme('width.5'),
          icon: '<svg fill="#fff" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="4.5"/></svg>'
        },

However that radio will change if I do it in a css class.

<label class="inline-flex items-center">
                    <input type="radio" name="radio" id="radio" class="form-radio text-indigo-500" value="1" {{ old('radio','') == 1 ? 'checked':'' }}>
                    <span class="ml-2">Radio</span>
                </label>

Any advice appreciated.

[juanmiguelbesada]

Hi!

Didn't test it but, as indicated here
https://github.com/tailwindcss/custom-forms/blob/43f1075d08cc116ad546040a8959a11addacfee5/src/defaultOptions.js#L114

You should use color instead of textColor

[roni-estein]

Well that was a bang on untested assumption! It worked like a charm!