Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Hasith's avatar
Level 1

Flowbite Not Working inside Laravel Livewire Component

I'm having JS issue when installing Flowbite to my Laravel Livewire APP. I built a project in Laravel 11 using the Livewire Jetstream Starter Kit. Then, I configured some external packages such as Wireui, Filament, and MaryUi. When I tried to install Flowbite, the CSS worked, but the Flowbite JS did not. This is my tailwind.config file, and I also added import "flowbite"; to the app.js file.

import defaultTheme from "tailwindcss/defaultTheme";
import forms from "@tailwindcss/forms";
import typography from "@tailwindcss/typography";
import wireuiConfig from "./vendor/wireui/wireui/tailwind.config.js";
import filamentConfig from "./vendor/filament/support/tailwind.config.preset";
const colors = require("tailwindcss/colors");

/** @type {import('tailwindcss').Config} */
export default {
    presets: [wireuiConfig, filamentConfig],
    darkMode: "class",
    content: [
        "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
        "./vendor/laravel/jetstream/**/*.blade.php",
        "./storage/framework/views/*.php",
        "./resources/views/**/*.blade.php",
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./node_modules/flowbite/**/*.js",
        "./vendor/robsontenorio/mary/src/View/Components/**/*.php",
        "./app/Filament/**/*.php",
        "./resources/views/filament/**/*.blade.php",
        "./vendor/filament/**/*.blade.php",
        "./vendor/wireui/wireui/src/*.php",
        "./vendor/wireui/wireui/ts/**/*.ts",
        "./vendor/wireui/wireui/src/WireUi/**/*.php",
        "./vendor/wireui/wireui/src/Components/**/*.php",
    ],
    theme: {
        extend: {
            colors: {
                primary: colors.amber,
                secondary: colors.gray,
                positive: colors.emerald,
                negative: colors.red,
                warning: colors.amber,
                info: colors.blue,
            },
            fontFamily: {
                sans: ["Figtree", ...defaultTheme.fontFamily.sans],
            },
        },
    },
    daisyui: {
        themes: [
            {
                light: {
                    ...require("daisyui/src/theming/themes")["light"],
                    primary: "#f59e0b",
                },
                dark: {
                    ...require("daisyui/src/theming/themes")["dark"],
                    primary: "#f59e0b",
                },
            },
        ],
    },
    plugins: [
        forms,
        typography,
        require("daisyui"),
        require("flowbite/plugin"),
    ],
};
0 likes
3 replies
Hasith's avatar
Level 1

Since I started using Livewire 3 and Full Page components, I found a simple solution for the JS issue. Follow the installation steps mentioned in the Flowbite Doc. After that By using the AlpineJS init method at the top of each Full Page component, Flowbite JS works perfectly.

<div x-init="initFlowbite();"></div>

2 likes

Please or to participate in this conversation.