Issue
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.
- Install Flowbite as a dependency using NPM by running the following command:
npm install flowbite
- Require Flowbite as a plugin inside the
tailwind.config.js
file:module.exports = { plugins: [ require('flowbite/plugin') ] }
- Additionally to your own
content
data you should addflowbite
to apply the classes from the interactive elements in thetailwind.config.js
file:module.exports = { content: [ "./node_modules/flowbite/**/*.js" ] }
Answered By - Wongjn
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.