© 2026 Hedgehog Software, LLC

TwitterGitHubDiscord
More
CommunitiesDocsAboutTermsPrivacy
Search
Star
Setup for Free
FilamentF
Filament•3y ago•
4 replies
Davide Cariola

Daisy UI on a Livewire component to use in a custom page

Hi everyone!

I'm trying to apply base tailwind classes and Daisy UI ones in a Livewire component used in a custom page.

I've read the previous conversations about it, created a custom theme, but I can't seem to make it work.

This is my vite.config.js:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js', 'resources/css/filament/admin/theme.css'],
            refresh: true,
        }),
    ],
});
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js', 'resources/css/filament/admin/theme.css'],
            refresh: true,
        }),
    ],
});

This is my tailwind.config.js:
import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
    plugins: [require("daisyui")]
}
import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
    plugins: [require("daisyui")]
}

My AdminPanelProvider:
])->viteTheme('resources/css/filament/admin/theme.css');
])->viteTheme('resources/css/filament/admin/theme.css');


My component:
<div class="bg-orange-500">
    <button class="btn btn-primary">Primary</button>

    <hr>

    This is the table!

    {{ $this->table }}
</div>
<div class="bg-orange-500">
    <button class="btn btn-primary">Primary</button>

    <hr>

    This is the table!

    {{ $this->table }}
</div>

Both
bg-orange-500
bg-orange-500
(default tailwind) and
btn btn-primary
btn btn-primary
(daisy ui) don't work.
I've run
npm run build
npm run build
and have
npm run dev
npm run dev
active. I receive the daisy ui message when building the assets.

I also notice that if in my tailwind.config.js lives
plugins: [require("daisyui")]
plugins: [require("daisyui")]
, come colors from the side bar disappears

Thank you so much for every help.
Filament banner
FilamentJoin
A powerful open source UI framework for Laravel • Build and ship admin panels & apps fast with Livewire
20,307Members
Resources

Similar Threads

Was this page helpful?
Recent Announcements

Similar Threads

How to use Livewire Component in Custom Page ?
FilamentFFilament / ❓┊help
3y ago
Adding livewire component to custom page
FilamentFFilament / ❓┊help
3y ago
Livewire component name for a custom page
FilamentFFilament / ❓┊help
3y ago
UI glitch/issue with a Page (Livewire component)
FilamentFFilament / ❓┊help
3y ago