使用 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`}。