Kevin Powell - Community•7mo ago

Rendering Issue with Flowbite Plugin in Angular Project

Hello everyone, 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>

<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. Thank you!

1 Reply

MarkBoots•7mo ago

No experience with any of that stack. But think it would be a bit easier for us if we can see the rendered html/css what does it look like when you inspect those elements?

Gaming

Programming

Rendering Issue with Flowbite Plugin in Angular Project