Autofill input in dark mode with Tailwind

Question

I had a problem with ugly colour in input after filling it with remembered password using Dark Mode. In light mode it was yellow, not that bad.

I found some answers using webkit-autofill in SO here, but had problem with implementing it in with tailwind dark: prop and with sass in global.scss file.

score 2 · Accepted Answer · answered Apr 03 '23 at 13:00

The solution was to add this to global.scss file:

@layer components {
  .inputDarkModeOverride {
    &:-webkit-autofill {
      box-shadow: 0 0 0 30px #1c1c1d inset;
    }

    &:-webkit-autofill:hover {
      box-shadow: 0 0 0 30px #1c1c1d inset;
    }

    &:-webkit-autofill:focus {
      box-shadow: 0 0 0 30px #1c1c1d inset;
    }

    &:-webkit-autofill:active {
      box-shadow: 0 0 0 30px #1c1c1d inset;
    }
  }
}

and then className={`${styles.input} dark:inputDarkModeOverride`} in input props.

Autofill input in dark mode with Tailwind

1 Answers1