I would like to use the FlowBite library in my Laravel project, but I can't get it to work.
However, as you can see in image, the file input is not displayed correctly.
I followed to use this library in my laravel project:
- I run
npm install flowbite. - In tailwind.config.js file and resources/js/app.js, I added necessary codes to work flowbite library.
tailwind.config.js
import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';
/** @type {import('tailwindcss').Config} */
export default {
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./node_modules/flowbite/**/*.js', // It was added
],
theme: {
extend: {
fontFamily: {
sans: ['Figtree', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [
forms,
require('flowbite/plugin'), // It was added
],
};
resources/js/app.js
import 'flowbite'; // It was added
import './bootstrap';
import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();
package.json
{
"private": true,
"type": "module",
"scripts": {
"build": "vite build",
"dev": "vite"
},
"devDependencies": {
"@tailwindcss/forms": "^0.5.2",
"@tailwindcss/vite": "^4.0.0",
"alpinejs": "^3.4.2",
"autoprefixer": "^10.4.2",
"axios": "^1.8.2",
"concurrently": "^9.0.1",
"laravel-vite-plugin": "^1.2.0",
"postcss": "^8.4.31",
"tailwindcss": "^3.1.0",
"vite": "^6.2.4"
},
"dependencies": {
"flowbite": "^3.1.2"
}
}

import flowbite from "flowbite/plugin";andplugins:[forms,flowbite,](it's just a note, not related for problem)@import 'flowbite/dist/flowbite.css';to the top of the resources/css/app.css file. By the way, thank you for the advice about usingimportinstead ofrequire— I will consider it.