Allow styling of checkboxes using the text-color classes

[miczed]

I ran into a situation today where I wanted to change the color of the tick icon that is rendered within the checkbox when it is checked. Since we're able to change the background color using the bg-{color} classes wouldn't it be nice if the tick itself could be styled by using the text-{color} classes?

So far I've achieved this by adding the following css code but this doesn't feel like the "tailwind" way of doing things:

<input type="checkbox"  checked class="form-checkbox w-8 h-8 border-gray-300 text-gray-600 bg-white"/>

.form-checkbox:checked {
  &.text-gray-600 {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23718096' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e")
  }
}

The fill property of the SVG that is used as the background-image needs to be adjusted. I'm sure this could be automated by generating the css above with all the text-{color} variations there are.

[miczed]

I definitely should have read the documentation more carefully, my bad. In case anyone is interested, I achieved the desired behavior by adding the following to my config:

module.exports = {
  theme: {
    customForms: theme => ({
      default: {
        checkbox: {
          iconColor: theme('colors.gray.600'), // changes the default color of the icon
          '&.correct': {
            iconColor: theme('colors.green.500'), // 'input.correct' will change the color of the icon to green
          },
          '&.wrong': {
            iconColor: theme('colors.red.500'), // 'input.wrong' will change the color of the icon to red
          }
        }
      }
    }
  }
}