Tailwind CSS: Text color of form inputit isn't properly set on autofill (Chrome). May be solved with 'autoprefixer'?

[leandrocaplan]

Hi there!

I have an input field on my form coded like this:

<input type="text" id="calle" name="direccion[calle]" required
class="w-11/12 mx-auto rounded-md border-gray-400 focus:ring-0 focus:border-green-800 h-10 pt-3 overflow-hidden my-1 text-gray-600 text-lg">

However, despite the text at the input is displayed with the right color in most cases, it show black when autocompleted in Chrome, like this:

I've partially solved this by adding to my 'app.css':

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
  -webkit-text-fill-color: rgb(75 85 99 / var(--tw-text-opacity));
}

Now it shows like this when just autocompleted:

However, in that code, the text color is harcoded with the color value of that specific input, resulting useless when I have some other input with a different text color.

Attempting to solve this, I've installed the 'autoprefixer' plugin for within Tailwind, which I think it might help.

So now I have in mi 'tailwind.config.js':

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography';
import autoprefixer from 'autoprefixer';

export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php' , './storage/framework/views/*.php',
        './resources/views/**/*.blade.php' ,  './resources/**/*.blade.php' , './resources/**/**/**/**/*.blade.php'
    ],

    theme: {
        container: { center: true },
        extend: {
            gridTemplateColumns: { '16': 'repeat(16, minmax(0, 1fr))' , 'footer': '200px minmax(900px, 1fr) 100px' },
            fontFamily: { sans: ['Nunito', ...defaultTheme.fontFamily.sans] , mont: ['Montserrat'] }
        }
    },

    plugins: [forms , typography , autoprefixer],
};

Does anyone knows the proper way to achieve this wanted result by using 'autoprefixer'?

Thanks a lot!

Leandro

[ai]

Sorry, you need to ask Tailwind community.

Autoprefixer is PostCSS plugin. Tailwind uses PostCSS, but I need Tailwind internals knowledge to answer.