Input element render differently on my page

I have found an example for a file <input> element, which I would like to use on my website. You can see it in this page, or in the image below:

I am using React, so I have to adjust the code ever so slightly (e.g. class => className), so in my code it looks like this:

<input 
    className="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" 
    aria-describedby="file_input_help" 
    id="file_input" 
    type="file" />

However, on my site it looks quite different. More specifically, the "Choose file" button looks quite off, as you can see:

I have Tailwind 3.4.0 installed, which from what I can see should be fine. What am I missing here?

>Solution :

It seems like you are missing Flowbite’s CSS.

Compare without:

<script src="https://cdn.tailwindcss.com/3.4.1"></script>

<input 
  class="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" 
  aria-describedby="file_input_help" 
  id="file_input" 
  type="file"
/>

To with:

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

<input 
  class="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" 
  aria-describedby="file_input_help" 
  id="file_input" 
  type="file"
/>

I included the CDN link for the purposes of the StackOverflow inline snippet, but for the build version of Tailwind, you’d want to follow their instructions as per their Getting Started page:

Require via NPM

Make sure that you have Node.js and Tailwind CSS installed.

1. Install Flowbite as a dependency using NPM by running the following command:

   npm install flowbite
   

2. Require Flowbite as a plugin inside the tailwind.config.js file:

   module.exports = {
   
     plugins: [
       require('flowbite/plugin')
     ]
   
   }
   

3. Additionally to your own content data you should add flowbite to apply the classes from the interactive elements in the tailwind.config.js file:

   module.exports = {
   
     content: [
       "./node_modules/flowbite/**/*.js"
     ]
   
   }