I’m currently experiencing an issue with the Flowbite plugin in my Angular project. When I include require(“flowbite/plugin”) in my tailwind.config.js file, the rendering of my application becomes unusual, specifically when I use the type attribute on an input element.

Here’s the relevant part of my tailwind.config.js:

require("flowbite/plugin")

And here’s an excerpt from my Angular component:`

<form [formGroup]="form" class="mt-8 space-y-6" (ngSubmit)="login">

  <div>

    <app-input

      id="email"

      type="email"

      label="Email"

  placeholder="[email protected]"

      formControlName="email"

    />

  </div>

  <div>

    <app-input

      id="password"

      type="password"

      label="Password"

      formControlName="password"

    />

  </div>

</form>

When I remove the type attribute, the issue doesn’t occur. Interestingly, when I keep the type attribute and remove require("flowbite/plugin") from my Tailwind configuration, everything works fine again.

The issue is that the rendering of my HTML becomes strange. I’ve attached a screenshot to illustrate the problem.

I’ve tried troubleshooting the issue, but haven’t been able to identify the cause.

I’m using the latest version of Flowbite and Tailwind CSS in an Angular project. Has anyone encountered a similar issue or have any suggestions on how to resolve this?

Any help would be greatly appreciated.