Roadmap Blog
refactoring
use of
how to create
when to use
mistakes to avoid
Tip 24/72

Use of `autofill` Variant

Use the `autofill` variant to style autofilled inputs in your application.

The autofill variant in TailwindCSS allows you to style inputs that have been autofilled by the browser. This is particularly useful for ensuring that autofilled inputs match the design of your application and provide a consistent user experience.

<form>
    <input 
        class="w-full px-3 h-9 rounded-md border focus:border-transparent focus:ring-2 focus:ring-primary-600 autofill:border-blue-500 autofill:focus:ring-blue-600 dark:text-white dark:border-gray-800 dark:focus:border-transparent" 
        type="email" 
        name="email"
        placeholder="Your email address"
    />
</form>

Note on Browser Limitations

Note: The user agent style sheets of many browsers use !important in their :-webkit-autofill style declarations, making them non-overridable by webpages without resorting to JavaScript hacks. For example, Chrome has the following in its internal stylesheet:

background-color: rgb(232 240 254) !important;
background-image: none !important;
color: -internal-light-dark(black, white) !important;

This means that you cannot set the background-color, background-image, or color in your own rules.

MDN Web Docs

Conclusion

Using the autofill variant in TailwindCSS allows you to style autofilled inputs, ensuring they match the design of your application. However, be aware of browser limitations that may prevent you from overriding certain styles. By understanding these limitations, you can create a more consistent and visually appealing user experience.