使用 Tailwind 在深色模式下自动填充输入

Question

使用深色模式填写记住的密码后，我遇到了输入颜色难看的问题。 在灯光模式下它是黄的，还不错。

我在这里使用 webkit-autofill 找到了一些答案，但在使用 tailwind dark: prop 和 global.scss 文件中的 sass 实现它时遇到了问题。

Answer 1

解决方案是将其添加到 global.scss 文件中：

@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;
    }
  }
}

然后在输入属性中添加className={`${styles.input} dark:inputDarkModeOverride`}。