Autofill input in dark mode using Tailwind

Question

After using dark mode to fill in a remembered password, I ran into an issue with the input colors being ugly. In light mode it's yellow, which is not bad. I found some answers here using webkit-autofill but I'm having trouble implementing it using tailwinddark:prop and sass in the global.scss file.

P粉998100648 · Answer

The solution is to add this to the 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;
    }
  }
}

Then add className={`${styles.input} dark:inputDarkModeOverride`} in the input attribute.