Autofill input in dark mode using Tailwind

Question

After using dark mode to fill in remembered passwords, I encountered 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 am having trouble using tailwind dark: prop and global.scss file.

Answer 1

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.