flowbite-svelte disables Tailwind's file: pseudo-classes

[apparchsysad]

Describe the bug

Flowbite docs for the <Fileupload> component show a "Choose File" button styled with a black background.

This might not suit everyone, so you might try to style this with a tailwind "file:bg-red-500" class, or similar. Disappointingly, you'll find this has no effect - the button remains stubbornly black.

Worse, you might also be unhappy with the 3rem height of the button. You'll find that you can style this with a Tailwind "h-[2rem]" or similar, but then you'll find that this loses the vertical alignment of the "Choose File" and "No File selected" text.

You might then try to use a native <input type="file">. You'll then be doubly disappointed because this will suffer from exactly the same problems.

This behaviour is not seen when the styling is applied in a Svelte/Tailwind project that doesn't use Flowbite-Svelte. It appears that the flowbite-svelte plugin triggers the issue.

Reproduction

`The HTML below in a project with Flowbite-Svelte installed sets the height of the input but doesn't vertically align its content and fails to set the background of its "Choose File" button to violet. The persistent black background is particularly annoying.

<div class="flex items-center justify-center">
	<Label>File:&nbsp;&nbsp; </Label>
	<Fileupload
		class="inline-block w-[25rem] h-[2rem] py-0 !file:bg-violet-500 bg-violet-200"
	/>
</div>

Flowbite version and System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (12) x64 13th Gen Intel(R) Core(TM) i7-1355U
    Memory: 2.43 GB / 15.68 GB
  Binaries:
    Node: 20.11.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.0.6 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @sveltejs/kit: ^2.0.0 => 2.15.3
    flowbite-svelte: ^0.47.4 => 0.47.4
    svelte: ^5.0.0 => 5.18.0
    vite: ^5.4.11 => 5.4.11

[apparchsysad]

I've not been able to pin down exactly what triggers the problem in flowbite-svelte, but have found a workaround - just add the following (or similar) to your Svelte project's src/app.css file:

input[type="file"]::file-selector-button {
    background-color: #7c3aed !important; /*Forces  violet-500 button background */
    height: 2rem !important;  /* Forces height */
    padding: 0.4rem 2rem !important; /* Forces t/b, l/r padding */
}

`

[jjagielka]

Latest version (v0.48.2) and this is what I acheive:

<div>
  <Label for="with_helper" class="pb-2">Upload file</Label>
  <Fileupload id="with_helper" class="inline-block w-[25rem] h-[2rem] mb-2 file:bg-violet-500 bg-violet-200 file:py-1" />
  <Helper>SVG, PNG, JPG or GIF (MAX. 800x400px).</Helper>
</div>

[apparchsysad]

Nice. The bg-violet-500 doesn't quite fill the "Browse" button, but adding "h-auto" seems to fix this. What's the status of v0.48.2 please?