0

I am currently using Flowbite CDN and Tailwind CDN on my project. I used a Flowbite component carousel but somehow it also changed my input element classes. The third input field somehow is not changed, only the first and second.

<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.css" rel="stylesheet" />

<form class="flex flex-col gap-3 mt-5 relative" action="">

  <label class="font-semibold" for="username">Name</label>

  <input class="border-b-2 pr-3 pt-3 outline-none" type="text" id="username" required />
  <label class="font-semibold" for="emailOrPhoneNumber">Email/Phone number</label>

  <input class="border-b-2 pr-3 pt-3 outline-none" type="text" id="emailOrPhoneNumber" required />
  <label class="font-semibold" for="help">What can we help you with?</label>

  <input class="border-b-2 pr-3 pt-3 outline-none" id="help" />
  <input type="submit" class="absolute top-72 right-1 bg-blue-500 text-white px-5 py-3 rounded-md w-1/4 mt-3 hover:cursor-pointer hover:bg-cyan-300 duration-150">

</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.js"></script>

Screenshot

I tried searching online but I could not find any solutions.

Wahlstrommm
  • 684
  • 2
  • 7
  • 21
moshee
  • 5
  • 4

1 Answers1

0

<input> elements with certain type attribute values are styled by Flowbite. Thus, your third <input> element does not get styled by Flowbite since it does not have a type attribute.

You could consider overriding the Flowbite styling on the other <input> elements as needed, something like:

<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.css" rel="stylesheet" />

<form class="flex flex-col gap-3 mt-5 relative" action="">
  <label class="font-semibold" for="username">Name</label>
  <input class="border-0 border-b-2 border-gray-200 p-0 pr-3 pt-3 outline-none focus:ring-0 focus:border-gray-200" type="text" id="username" required />
  <label class="font-semibold" for="emailOrPhoneNumber">Email/Phone number</label>
  <input class="border-0 border-b-2 border-gray-200 p-0 pr-3 pt-3 outline-none focus:ring-0 focus:border-gray-200" type="text" id="emailOrPhoneNumber" required />
  <label class="font-semibold" for="help">What can we help you with?</label>
  <input class="border-b-2 pr-3 pt-3 outline-none" id="help" />
  <input type="submit" class="absolute top-72 right-1 bg-blue-500 text-white px-5 py-3 rounded-md w-1/4 mt-3 hover:cursor-pointer hover:bg-cyan-300 duration-150">
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.js"></script>
Wongjn
  • 8,544
  • 2
  • 8
  • 24
  • thank you so much, your solution worked. I also learned about Flowbite styling with its certain types. – moshee May 02 '23 at 11:27