Input background is transparent when upgrading from v3 to v4

[AntonioDiPassio-AppSys]

I just upgraded from v3.4.17 to v4.1.3 and I noticed that the input elements now have a transparent background instead of white.
But there are no mentions for this in the upgrade guide, and the upgrade tool does not preserve the background color when upgrading to v4.

It seems that this was fixed in #14913 but then (mistakenly?) reverted by #15100

[philipp-spiess]

Oh, yep, it does seem like this was accidentally reverted, you're right. Now that 4.0 is out for such a long time though, I worry that making this change now will be considered a breaking change again for many folks who have already updated.

I'm surprised that you're the first person to report this to be honest. Agree that we should mention it in the upgrade guide now, though.

[AntonioDiPassio-AppSys]

Don't forget to update the upgrade tool as well then.

I'm surprised that you're the first person to report this to be honest. Agree that we should mention it in the upgrade guide now, though.

I guess people don't use background colors on their forms 😄

[youssef-tharwat]

Having this same issue

[sumansuhag]

Hi,

<title>Input Test</title>

<form>
    <label for="username" class="block text-sm font-medium text-gray-700">Username</label>
    <input
        type="text"
        name="username"
        id="username"
        class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
        placeholder="you@example.com"
    >
    <!--
        In v3.4.17, this input likely had a white background by default.
        In v4.1.3, this input now has a transparent background by default,
        so it would show the `bg-gray-200` from the body.
    -->

    <label for="password" class="block text-sm font-medium text-gray-700 mt-4">Password</label>
    <input
        type="password"
        name="password"
        id="password"
        class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
    >
</form>

/* Simplified conceptual CSS from Preflight or forms plugin in v3 / with #14913 */ input[type="text"], input[type="password"], input[type="email"], /* ... other input types ... */ textarea, select { /* ... other resets ... */ background-color: #fff; /* Or a CSS variable that defaults to white */ /* Or it relied on browser agent styles that Preflight didn't override for background */ } /* Simplified conceptual CSS from Preflight in v4.1.3 */ input[type="text"], input[type="password"], input[type="email"], /* ... other input types ... */ textarea, select { /* ... other resets ... */ appearance: none; /* This often removes default browser styling, including backgrounds */ background-color: transparent; /* This could be explicit or the effective default */ /* The key is that the #fff default is gone */ }

    <input
        type="password"
        name="password"
        id="password"
        class="bg-white dark:bg-neutral-900 mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
    >
    <!-- Added 'bg-white' -->

// Extremely simplified pseudo-code for a codemod concept
function transformNode(node) {
if (['input', 'textarea', 'select'].includes(node.tag)) {
const existingClasses = node.attributes.class || '';
if (!existingClasses.match(/\bbg-[\w-]+\b/)) { // Check if no bg-* class exists
node.attributes.class = (existingClasses + ' bg-white').trim(); // Add bg-white
}
}
}

Good luck!
SUMAN SUHAG

[hfroot]

Same issue - file input buttons have lost the appearance of a button

I would expect

Edit to add:

I "fixed" this by doing the following, to revert to the browser styling :

@layer base {
  input::file-selector-button {
    all: revert;
  }
}

[IsmeetKachhap007]

set a background color on your input elements.
Add a Tailwind background utility class (e.g., bg-white) to your input fields:

Or, add a base style for all inputs
If you want all inputs to have a white background by default, add this to your CSS:
@layer base {
input {
background-color: #fff;
}
}
If you want to revert to browser defaults for other input elements (like file inputs):
@layer base {
input::file-selector-button {
all: revert;
}
}