bug: Text Input placeholder color not properly applied

[mathisvester]

Reproduction URL (Required)

https://cute-alpaca-84ef4e.netlify.app

What version of daisyUI are you using?

v5.0.35

Which browsers are you seeing the problem on?

All browsers

Describe your issue

When comparing the placeholder color of the Text Input component from the daisyUI docs with my Angular project, there's a discrepancy in how the ::placeholder color is rendered.

In my Angular project, the CSS rule for ::placeholder is correctly generated with color-mix, but the browser (Chrome) does not apply it. In Chrome DevTools, it resolves to color: currentColor; instead of the intended mixed value. However, on the daisyUI documentation site, the placeholder appears correctly with the mixed color and Chrome DevTools displays the color rule color: color-mix(in oklab, currentColor 50%, transparent); as expected.

I can confirm this behaviour in mobile Safari and Firefox, too.

[github-actions[bot]]

Thank you @mathisvester for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[mathisvester]

Temporary fixed it by applying styles manually and replacing currentColor with actual color:

::placeholder {
    color: color-mix(in oklab, #100f0f 50%, transparent);
}

[saadeghi]

Can you share a minimal reproduction link where I can see the issue please?

[mathisvester]

@saadeghi created a new reproduction URL

[mikerooni]

I've managed to fix this using the following workaround so that it stays theme-aware:

@plugin "daisyui/theme" {
    ...
    
    --color-base-placeholder: color-mix(in oklab, currentColor 50%, transparent);
}

::placeholder {
    color: var(--color-base-placeholder);
}

If I skip the variable and use color: color-mix(in oklab, currentColor 50%, transparent) directly, it stops working.

As to why this is the case, I honestly have no idea - maybe it's simply an edge case in how most browsers parse CSS...

[pdanpdan]

I think you should check what is the list of supported browsers used when building. I think you have some browsers that do not support color-mix in the list, and you hit a tailwind bug.

You can test simply by adding a simple <input class="placeholder-red-300" /> and see if it renders as expected.

[pdanpdan]

@mikerooni @mathisvester any feedback? Can this be closed, or can you add details?

[mathisvester]

@pdanpdan when I'm opening the reproduction url in my mobile Safari v18 I'm facing the same issue. I currently havn't got time to test other browsers, but this Safari version should be supported right: https://tailwindcss.com/docs/compatibility?

[pdanpdan]

The normal CSS that is compiled for placeholder is:

@supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size:1px) {
  ::placeholder {
    color:currentColor
  }

  @supports (color: color-mix(in lab,red,red)) {
    ::placeholder {
      color:color-mix(in oklab,currentcolor 50%,transparent)
    }
  }
}

In your reproduction you have:

@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
  ::placeholder {
    color:currentcolor
  }

  @supports (color: color-mix(in lab,red,red)) {
    {
      color:color-mix(in oklab,currentcolor 50%,transparent)
    }
  }
}

So it must be some CSS processor/post-processor you are using that breaks the output.

I'm sorry but if you don't provide any details on your tools it's hard to help you fix your tools chain.

I can guess it's something like this: https://github.com/tailwindlabs/tailwindcss/issues/16147#issuecomment-2629318357 (check all thread)

[pdanpdan]

I'm pretty sure this can be closed. I think it is related to some wrong behavior of angular tools and/or wrong configuration.

[saadeghi]

Agreed. if it's not something that can be fixed from the source code of this repo, issue should be tracked to the repo that is causing the issue.

Closing this, but feel free to continue the conversation in case it helps finding a solution or workaround.