Tailwind autofill: prefix on form inputs not working

[CaptainZiboo]

Hello there ! 👋

<input type="password" name="password" id="password" placeholder="name@example.com" class="leading-tight text-sm font-normal flex items-center p-0 dark:text-gray-400 placeholder:dark:text-gray-400 bg-transparent border-0 focus:ring-0 autofill:bg-transparent">

I tried to edit the autofill background on form input because it becomes white even when using a dark theme. But it seems that the autofill: prefix just don't work and I can't figure why... Can someone help with that ?

https://tailwindcss.com/docs/hover-focus-and-other-states#autofill

[ZhengRui]

having the same issue here, I manage to change the input background color by this, but no success in changing the font size (the autofilled font size is smaller than after it is filled)

[MarkAlexanderDev]

Same issue here

[TheJazzDev]

This would have been a better option but i can't use it because i'm using light and dark mode on my website so i can't customize it here...

[idarshan181]

The same issue, is there any way to modify -webkit-text-fill-color: #fff; property based on className='dark' in the HTML tag?

[King-OJ]

@TheJazzDev did you find an autofill solution for the light and dark mode?

[thedb]

Saved my life

[TheJazzDev]

Same issue here...

[fiskolini]

Same issue on v3.2.3and Firefox 106.0.2 (64-bit)

[lucasjungdeveloper]

Same on v3.2.4 and Chrome 107.0.5304.107

[apetta]

Facing this issue On v3.2.4 & Chrome 108.0.5359.124. Some utilities (like font size) work but bg colours, text colours etc. aren't working.

[nikolalsvk]

I made it work with Autoprefixer as described in Tailwind official docs.

The idea is to install autoprefixer and add it to Tailwind plugins.
You can do it like so:

npm install -D autoprefixer
# or
yarn add -D autoprefixer

Add to tailwind.config.js or your PostCSS config:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

Then, it will add rules like -webkit-autofill when you write autofill:something in Tailwind.

To change the autofill background color, you actually need to set the box-shadow like so:

autofill:shadow-[inset_0_0_0px_1000px_rgb(255,255,0)]

That will set an inset box shadow with yellow color on your input field when autofilled.

[NickWoodward]

This works for me, thanks, but I'm still suffering from similar issues for like text color on autofill

[jardieljw]

this 'autofill:shadow...' code to change background color functions even without the plugins, but using 'autofill:bg-black' doesn't work even with the plugin installed

[pipech]

The autofill:shadow-[inset_0_0_0px_1000px_rgb(255,255,0)] is a custom class that uses the box-shadow property to simulate a background color change on autofill.

The reason why autofill:bg-red-500 doesn't work is because browsers have specific styles they apply to autofilled inputs, and these styles are very difficult to override with normal CSS properties like background-color.

However, the box-shadow property is not overridden by the browser's autofill styles, so it can be used to simulate a background color change. The inset 0 0 0px 1000px rgb(255,255,0) value creates an inset (inner) shadow that's so large it covers the entire input, effectively changing its background color to yellow (rgb(255,255,0)).

This is a workaround to the limitation of not being able to directly change the background color of autofilled inputs with CSS.

[aristamaya]

try add "autofill:transition-colors autofill:duration-[5000000ms]"

[Wiktor-Sikora]

it creates annoying problems if you are switching themes

[LucasAven]

In addition to @AydosJs 's answer I also added :enable in order to keep the style after filling the field (the change of the color it's only because of my personal use case):

input:-webkit-autofill,
input:-webkit-autofill:enabled,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:enabled,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:enabled,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
-webkit-text-fill-color: #fff;
-webkit-box-shadow: 0 0 0px 1000px #785100c7 inset;
box-shadow: 0 0 0px 1000px #785100c7 inset;
background-color: #785100c7;
}

[jardieljw]

How do I change text size from autofill? when in the selection box from autofill the text is smaller than the input text

[zuoyi615]

I have same issue on v3.2.4 and Chrome 109.0.5414.119, and autofill:!bg-neutral-800 does not work.
Is there an elegant way to solve it ?

[Kocarik]

Same issue autofill:!bg-neutral-800 not work. I must install npm install -D autoprefixer and then use: autofill:shadow-[inset_0_0_0px_1000px_rgb(255,255,0)]

[kubasobecki]

Still an issue

[ihola777]

autofill:shadow-[inset_0_0_0px_1000px_rgba(var(--background))] for theme color

[hitenvats16]

I'm struggling in changing color on autofill. I added this to the input element class autofill:text-white. Even tried with autofill:!text-white but still no luck. Is anyone there tried above and succeed?

[apetta]

Facing this issue On v3.2.4 & Chrome 108.0.5359.124. Some utilities (like font size) work but bg colours, text colours etc. aren't working.

Just circling back on this. The simplest way to apply autofill styling is to add the following in your global.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {

  .autofill-text:-webkit-autofill {
    -webkit-text-fill-color: white;
  }

  .text-input {
    @apply autofill-text; /* set text colour (white) */
    @apply autofill:shadow-[inset_0_0_0px_1000px_#000]; /* set 'background' colour (black)*/
    @apply autofill:text-2xl; /* set font size */
  }
}

and then use text-input in className prop where desired.

This is working fine as of tailwind 3.4.1 with the default setup.

[ArrayIterator]

I just found issue about dark mode, the input background change to dark.
Just found temporary solution about change the color-scheme: dark to -webkit-autofill

[data-dark-mode-or-maybe-class-onbody] :-webkit-autofill,
[data-dark-mode-or-maybe-class-onbody] :-webkit-autofill:hover,
[data-dark-mode-or-maybe-class-onbody] :-webkit-autofill:focus {
    color-scheme: dark;
}