1 reply

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")

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!

KP-C

Kevin Powell - Community•2y ago•

1 reply

shadow7

Rendering Issue with Flowbite Plugin in Angular Project

require("flowbite/plugin")

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>

Rendering Issue with Flowbite Plugin in Angular Project

Rendering Issue with Flowbite Plugin in Angular Project

Similar Threads

Similar Threads

Similar Threads