0

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.

enter image description here

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"
    }
}
6
  • Please share a minimal reproduction. Commented Aug 25 at 12:56
  • @rozsazoltan Sorry, which code would you like me to share? Commented Aug 25 at 13:07
  • Yes, sorry, I wrote the message quickly. Your CSS imports are not visible in the question. (I assume the error might be here, this looks like an installation issue.) --- Also, as an off-note, I would import the plugin using import, similar to how you did with forms, so that everything stays consistent > import flowbite from "flowbite/plugin"; and plugins:[forms,flowbite,] (it's just a note, not related for problem) Commented Aug 25 at 13:09
  • And the component code itself is also missing. If it appears in the screenshot, include it as text so we can test it with your exact component. Commented Aug 25 at 13:14
  • 1
    @rozsazoltan I solved the problem by adding the code @import 'flowbite/dist/flowbite.css'; to the top of the resources/css/app.css file. By the way, thank you for the advice about using import instead of require — I will consider it. Commented Aug 25 at 13:21

1 Answer 1

1

I solved the problem by including the Flowbite CSS file.

After importing it into resources/css/app.css, everything worked as expected: @import 'flowbite/dist/flowbite.css';

Thank you to everyone who writes a comment.

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.