states (focus, hover) not working

[v-raja]

I'm using the following config for my forms:

theme: {
    customForms: theme => ({
      default: {
        select: {
          borderColor: 'transparent',
          borderRadius: theme('borderRadius.lg'),
          backgroundColor: theme('colors.gray.700'),
          color: theme('colors.white'),
          lineHeight: theme('lineHeight.snug'),
          "&:focus": {
            backgroundColor: 'colors.gray.600',
            shadow: 'none',
            borderColor:   'transparent',
          },
          "&:hover": {
            backgroundColor: 'colors.gray.600'
          }
        }
      }
   })
}

When it renders however, the focus and hover states don't seem to work. The rendered html doesn't include any of the focus and hover state classes like "focus:bg-gray-600". Adding the classes manually to the html works fine. Is there anything I have to configure to get this to work?

(not sure if this is relevant, but I'm using the plugin with Rails)

[v-raja]

Figured it out: I was using colors.gray.600 instead of theme(colors.gray.600) for the focus and hover states 😅