File input - button not rendering correctly

[Dalidos]

Describe the bug The file input button not rendering correctly

and I fix the issue to force ::file-selector-button like this:

input[type="file"]::file-selector-button { font-size: 1rem; }

• Browser [chrome, firefox]
• sveltejs/kit: 2
• tailwindcss: 3.4.9
• flowbite: 3.0.0
• flowbite-svelte: 0.47.4

[PhilETaylor]

Are you sure you have not accidentally upgraded to Tailwind 4? Mine were all working fine until I upgraded to Tailwind 4 this week, now I have had to manually override flowbite with the following

file:mr-4 file:py-1 file:px-2 file:-mt-1 file:-mb-1 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-black file:text-white p-2.5 block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400

This gives a nice

The file upload example at https://flowbite.com/docs/components/forms/#file-upload certainly doesnt work in Tailwind 4.

[rashh-sikun]

Are you sure you have not accidentally upgraded to Tailwind 4? Mine were all working fine until I upgraded to Tailwind 4 this week, now I have had to manually override flowbite with the following

file:mr-4 file:py-1 file:px-2 file:-mt-1 file:-mb-1 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-black file:text-white p-2.5 block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400

This gives a nice

The file upload example at https://flowbite.com/docs/components/forms/#file-upload certainly doesnt work in Tailwind 4.

is there any way to change the black color bg to any other colour?

[PhilETaylor]

Change file:bg-black - simples.

Here is a share of the play, the first is the copy and paste from Flowbite, which as you can see doesnt work in Tailwind 4.0.1

and the second is mine, with the above classes, and made yellow as a PoC

https://play.tailwindcss.com/XpDC7iVYDL