Flowbite-React TextInput placeholder disappear on focus?

Question

I'm having difficulty changing the placeholder opacity specifically on a TextInput when I focus in on it. Wondering if anyone else had a workaround or fix for this? (using tailwind)

import { TextInput } from "flowbite-react"

...
render (
  <TextInput
    id="showdate.yy"
    style={{
      textAlign: "center",
      fontSize: "14px",
    }}
    {...register("showDate.YY")}
    className="focus:placeholder:opacity-0"
    placeholder="Year"
  />
)

Globals.css

input:focus-within::placeholder,
input:focus::placeholder {
  opacity: 0 !important;
  color: transparent !important;
  transition: opacity 150 ms ease-in-out !important;
}

Answer 1

To change the placeholder opacity after the input is focused you can use focused:placeholder-gray-400

Example:

<input
  type="text" className="focus:placeholder-gray-400 text-gray-800"
   placeholder="Search"
/>

You can change the color or the opacity value, as bellow :

focus:placeholder-red-200