autofill prefix not working

[esau-morais]

What version of Tailwind CSS are you using?

v3.3.6

What build tool (or framework if it abstracts the build tool) are you using?

vite v5.0.4

What version of Node.js are you using?

v21.2

What browser are you using?

Chrome

What operating system are you using?

Ubuntu

Reproduction URL

Codesandbox

Describe your issue

autofill not working

[thecrypticace]

Hey, so this is a browser limitation. Several browsers use !important in their own stylesheets for autofill which means you're not able to override:

• color
• background-color
• background-image

There are likely some other properties too but in general these are the ones you'd most likely want to change but can't. I prepped a Tailwind Play showing how the background and text colors don't change but border color and border radius do: https://play.tailwindcss.com/wLtrj19GMa

Hope that helps! ✨

[thecrypticace]

Our example in the docs does show background color but I'm gonna change it since this limitation does exist in at least some browsers.

[askomarov]

@thecrypticace autofill: still not working in v4 too https://play.tailwindcss.com/p6EOb1iUig https://play.tailwindcss.com/Vnh4x1p8L4 @