Adding background-color to any parent element breaks this

[kevinsproles]

example:

<div class="bg-gray-200">
        <div class="bg-transparent relative border-b-2 focus-within:border-blue-500">
        <input type="text" name="username" placeholder=" " class="block w-full appearance-none focus:outline-none bg-transparent" />
        <label for="username" class="absolute top-0 -z-1 duration-300 origin-0 bg-white">Username</label>
</div>

[marcjulian]

@kevinsproles yes thats a current issue

One solutions could be Creating a component for the floating input and passing the background color to it. Better would be if the background color could be applied to the label using maybe css variables or something else we could generate using Tailwind.

[kevinsproles]

I couldn't figure out how to manually fix this, could you explain or provide a code sample?

[marcjulian]

@kevinsproles Here is an example component written w/ Svelte.
On the page you can toggle between dark and light mode. The background color for the label is specified using a dark: variant e.g.

<label class="... bg-white dark:bg-dark-500"

Additonally, the component TextField has also a property called bgColor to match the background color of the label.

Does this help you a bit more?

I will also create a post on how to do it with an Angular component.

[igorjacauna]

I solve this removing the -z-1 class and adding pointer-events-none in <label> and set my background color in parent <div>

<div class="outline relative border-2 focus-within:border-blue-500 rounded-md bg-gray-100">
    <input
      type="text"
      name="username"
      placeholder=" "
      class="block p-4 w-full text-lg appearance-none focus:outline-none bg-transparent"
    />
    <label
      for="username"
      class="absolute top-0 text-lg p-4 duration-300 origin-0 pointer-events-none"
      >Username</label
    >
</div>