Home  >  Q&A  >  body text

Autofill input in dark mode using Tailwind

<p>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. </p> <p>I found some answers here using <code>webkit-autofill</code> but I am having trouble using tailwind <code>dark: </code> prop and <code>global.scss</ I'm having trouble implementing it in sass in the code> file. </p>
P粉745412116P粉745412116438 days ago557

reply all(1)I'll reply

  • P粉998100648

    P粉9981006482023-08-29 00:49:23

    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.

    reply
    0
  • Cancelreply