-webkit-placeholder color not being set in production

[DesignMitZweiS]

Hi there,

I've discovered an odd issue regarding the input placeholder color.

I'm using tailwindcsss 2.2.19 and @sveltejs/kit 1.0.0-next.196

In my app I've changed the input place holder color to "placeholder-gray-500". When I load it locally via 'npm run dev' everything is looking fine. However, when I run 'npm run build' and deploy the static site to my webhost, the placeholder color is #757575.
I think '-webkit-input -placeholder' vendor prefix is missing there ..

This is the generated code of the stylesheet:

.placeholder-gray-500::-moz-placeholder,.placeholder-gray-500:-ms-input-placeholder,.placeholder-gray-500::placeholder {
    --tw-placeholder-opacity: 1;
    color: rgba(107,114,128,var(--tw-placeholder-opacity))
}

I had to to add a workaround to get the placeholder color fixed:

input::-webkit-input-placeholder { @apply text-gray-500; }

So is this a known issue or am I doing something wrong?

[adamwathan]

I'm guessing that's related to this issue, since sveltekit uses Vite and Vite uses esbuild:

evanw/esbuild#1776

You can probably downgrade esbuild to fix this until they fix that issue.

[DesignMitZweiS]

wow! thank you for the fast answer. I've downgraded esbuild to version 0.13.12 and the bug is gone!

awesome, thank you very much! :)

ps: code looks now like this:

input::-moz-placeholder,textarea::-moz-placeholder {
    color: #9ca3af;
    opacity: 1
}

input:-ms-input-placeholder,textarea:-ms-input-placeholder {
    color: #9ca3af;
    opacity: 1
}

input::placeholder,textarea::placeholder {
    color: #9ca3af;
    opacity: 1
}